Naive UI - Table
Naive UI 表格
·
template 部分
<template>
<n-data-table :columns="columns" :data="tableData" :pagination="pagination"/>
</template>
引入
import {ref} from "vue";
import type {Ref} from 'vue';
import {NButton} from 'naive-ui';
import type {DataTableColumns, PaginationProps} from 'naive-ui';
import {h} from 'vue'
定义
interface TableData {
id: number
evaluation_standard: string //考评标准
evaluation_method: string //考评方式
value: string //分值
value_type: number //分值类型(0:整数 1:小数 2:范围,3:单选)
update_time: Date //更新时间
update_user: string,
}
假数据
const tableData: TableData[] = [
{
id: 1,
evaluation_standard: "考评标准",
evaluation_method: "考评方式",
value: "89",
value_type: 1,
update_time: new Date(),
update_user: "更新人",
},
{
id: 2,
evaluation_standard: "考评标准2",
evaluation_method: "考评方式2",
value: "89",
value_type: 1,
update_time: new Date(),
update_user: "更新人2",
},
{
id: 3,
evaluation_standard: "考评标准3",
evaluation_method: "考评方式3",
value: "89",
value_type: 1,
update_time: new Date(),
update_user: "更新人3",
},
]
定义clounms,操作一个按钮
const createColumns = ({handleClick}: { handleClick: (name: string, row: TableData) => void }): DataTableColumns<TableData> => {
return [
{
key: 'index',
title: '编号',
align: 'center',
render: (_, index) => {
return `${index + 1}`
}
},
{
key: 'value',
title: '分值',
align: 'center'
},
{
key: 'evaluation_standard',
title: '评分标准',
align: 'center'
},
{
key: 'evaluation_method',
title: '考评方式',
align: 'center'
},
{
key: 'update_time',
title: '更新时间',
align: 'center'
},
{
title: '操作',
key: 'actions',
align: 'center',
render(row) {
return h(
NButton,
{
size: 'small',
onClick: () => handleClick(row)
},
{default: () => '编辑'}
)
}
},
]
}
const columns = createColumns({
handleClick(r) {
//逻辑
},
})
如果操作想写两个按钮
const createColumns = ({handleClick}: { handleClick: (name: string, row: TableData) => void }): DataTableColumns<TableData> => {
return [
{
key: 'index',
title: '编号',
align: 'center',
render: (_, index) => {
return `${index + 1}`
}
},
{
key: 'value',
title: '分值',
align: 'center'
},
{
key: 'evaluation_standard',
title: '评分标准',
align: 'center'
},
{
key: 'evaluation_method',
title: '考评方式',
align: 'center'
},
{
key: 'update_time',
title: '更新时间',
align: 'center'
},
{
title: '操作',
key: 'actions',
titleColSpan: 2,//表头合并 这边操作想写两个按钮
align: 'center',
width: 1,
render(row) {
return h(
NButton,
{
size: 'small',
onClick: () => handleClick('edit', row)
},
{default: () => '编辑'}
)
}
},
{
title: "",
width: 1,
key: "actions",
align: 'center',
titleColSpan: 2,
render(row) {
return h(NButton, {
size: "small",
// color: 'blue',
// type:'info',
// disabled: xxx ? false : true,//编辑按钮禁用,判断
onClick: () => handleClick('del', row)
}, {
default: () => '删除'
});
},
},
]
}
const columns = createColumns({
handleClick(name, r) {
if (name === 'edit')
//编辑的函数
else
//删除的函数
},
})
更多推荐
已为社区贡献1条内容
所有评论(0)