Naive UI - Table

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
                //删除的函数
        },
    })