记录vue3中h函数的各种使用方式

 vue3+naive ui 技术栈使用表格时会用到大量的h函数，这里记录一下h函数的各种使用方式。

1. 首先引入h函数

import { h } from "vue";

const actionRef = ref();

2.使用一个表格来介绍h函数的各种方式。

<BasicTable 
 :columns="columns" 
 :request="loadDataTable" 
 :row-key="(row) => row.id" 
 ref="actionRef"
 :actionColumn="actionColumn" 
 @update:checked-row-keys="onCheckedRow" 
 :scroll-x="1800">
</BasicTable>

3.h函数的使用。 

let columns = [
  // { type: 'selection', options: ['all'] },
  { type: "selection" },
  {
    title: "状态",
    key: "type",
    align: "left",
    width: 80,
    render(row) {
      let type;
      let color;
      if (row.type == 1) {
        type = "";
        color = "#61c9ff";
      } else if (row.type == 2) {
        type = "";
        color = "#ff61d8";
      } else if (row.type == 3) {
        type = "";
        color = "#22e7b9";
      } else if (row.type == 4) {
        type = "";
        color = "#ffb038";
      } else if (row.type == 5) {
        type = "";
        color = "#6087fd";
      }
      return h("div", { style: "display:flex;align-items:center;" }, [
        h("div", {
          style: `width:8px;height:8px;background:${color};border-radius:50%;margin-right:5px`,
        }),
        h("div", null, type),
      ]);
    },
  },
  {
    title: "负责人",
    key: "", //接口数据
    align: "left",
    render(row) {
      return h(
        NTooltip,
        { trigger: "hover" },
        {
          trigger: () => h("span", null, row.),
          default: () => h("span", null, row.),
        }
      );
    },
  },
  {
    title: "",
    key: "",
    align: "left",
     render(row) {
      return h(
        NTooltip,
        { trigger: "hover" },
        {
          trigger: () => h("span", null, row.),
          default: () => h("span", null, row.),
        }
      );
    }, 
  },
  {
    title: "时间",
    key: "time",
    align: "left",
  },
  {
    title: "金额",
    key: "amount",
    align: "left",
  },
  {
    title: "来源",
    key: "origin",
    align: "left",
    render(row) {
      let origin_img;
      if (row.origin == "抖音") {
        origin_img = douyin;
      } else if (row.origin == "京东") {
        origin_img = jingdong;
      } else if (row.origin == "小红书") {
        origin_img = redbook;
      } else if (row.origin == "天猫") {
        origin_img = tianmao;
      } else if (row.origin == "微信" || row.origin == "公众号") {
        origin_img = wechat;
      } else {
        origin_img = qita;
      }
      return h("div", { style: "display:flex;align-items:center;" }, [
        h("img", {
          style: `width:20px;height:20px;margin-right:5px`,
          src: origin_img,
        }),
        h("div", null, row.origin_child ? row.origin + row.origin_child : row.origin),
      ]);
    },
  },
  {
    title: "姓名",
    key: "name",
    align: "left",
  },
  {
    title: "手机",
    key: "mobile",
    width: 120,
    align: "left",
  },
  {
    title: "地址",
    key: "address",
    align: "left",
  },
  {
    title: "备注",
    key: "remarks",
    align: "left",
    width: 150,
    ellipsis: {
      tooltip: true,
      lineClamp: 3,
      tooltip: {
        width: 500,
      }
    }
  },
];

const actionColumn = reactive({
  width: 120,
  // width: 180,
  title: "操作",
  key: "action",
  fixed: "right",
  render(record) {
    return h("div",
       { style: "display:flex;flex-direction: column;align-items:center" },
      // null,
      [
        h(
          NButton,
          {
            style: `padding:0 10px;font-size:12px;margin-right:5px;border: 1px solid  ${getAppTheme.value}; background:#f9f9f9;color: ${getAppTheme.value}`,
            color: "#787878",
            size: "small",
            onClick: handleEdit.bind(null, record),
            ifShow: () => {
              return true;
            },
          },
          () => [
            h(NIcon, { color: getAppTheme.value }, () => h(EditFilled)),
            h("span", { style: "margin-left:5px;" }, "编辑/查看"),
          ]
        ),

        is_del.value == 0
          ? h(
            NButton,
            {
              style:
                "padding:0 10px;font-size:12px;border:1px solid #D3D2D2;;background:#f9f9f9;color:#787878;margin-top:5px;",
              color: "#787878",
              size: "small",
              onClick: handleDelete.bind(null, record, 1),
              ifShow: () => {
                return true;
              },
            },
            () => [
              h(
                NIcon,
                null,
                () => h(Delete24Filled)
              ),
              h("span", { style: "margin-left:5px;" }, "删除"),
            ]
          )
          : h(
            NButton,
            {
              style:
                "padding:0 10px;border:1px solid #D3D2D2;;background:#f9f9f9;color:#787878;margin-top:5px;",
              color: "#787878",
              size: "small",
              onClick: handleDelete.bind(null, record, 0),
              ifShow: () => {
                return true;
              },
            },
            () => [
              h(
                NIcon,
                // { size: 'large' },
                () => h(Delete24Filled)
              ),
              h("span", { style: "margin-left:5px;" }, "还原"),
            ]
          ),
      ]);
  },
});