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

榛果热可可

已于 2022-06-08 12:44:08 修改

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript

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

本文链接：https://blog.csdn.net/chenchendiandian/article/details/125179274

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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