【Naive UI中给表格的表头添加点击事件】

原创已于 2022-06-08 12:44:08 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-06-08 12:41:46 首次发布

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue应用中利用NaiveUI组件库为表格的表头添加点击事件。通过使用Vue的render函数和h函数创建虚拟DOM节点，实现表头点击触发自定义操作，例如按钮点击展示或删除功能。示例代码展示了如何结合NButton和NIcon组件来定义表头单元格的行为。

Naive UI中给表格的表头添加点击事件

一、Vue的render函数

参照链接：vue中的render函数
总结：

render函数即渲染函数，和template一样是创建html模板的

二、Vue的h函数

h函数是创建虚拟节点

三、实例

代码如下（示例）：

const columns = [
    {
        title: h(
            NButton,
            {
                onClick: () => function(),
                class: "operate-class",
                bordered: false,
            },
            {
                default: () => {
                    return h(NIcon, { size: "30", color: "#2080f0", component: AddSharp });
                },
            }
        ),
        width: "10%",
        className: "operation-class",
        render(row, index) {
            return h(
                NButton,
                {
                    onClick: () => clickDeleteBtn(index),
                },
                {
                    default: () => {
                        return h(NIcon, { size: "20", color: "#2080f0", component: RemoveSharp });
                    },
                }
            );
        },
    },
];