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;" }, "还原"),
]
),
]);
},
});