vue中关于h函数的使用

在开发中，特别是OA管理系统类的项目，经常需要做表格，我们会选用一些组件库，常用的比如element-ui或者naive-ui等，但组件库中自带的表格很可能不能完全满足我们的需求，比如说希望在用户信息表格中，将用户的姓名、电话号码、性别放在同一个格子中，我们可以使用vue中的h函数来操作。(我以naive-ui组件库为例)

// 这是一个简易的表格
<n-data-table :columns="columns" :data="data"></n-data-table>

// 我们先定义一个值
const data = ref()

// 然后调了一个接口，比如
getData().then((res: any) => {
    data.value = res.data
})
// 由于我们将返回的所有数据传给了data，所以，下面的row就是data了
const columns = [
    {
        title: "用户信息",
        key: "info",  // 由于你需要用h函数渲染，此处可以任意填一个接口中返回的属性
        align: "center", // 表示文本在该列居中,
        render: (row: any) => { 
            return h("div",{
                style: { cursor: "pointer", background: "pink" },
                onClick: () => { console.log(123) }
            },
            [
               h("span", {}, { default: ()  => row.name }), // 渲染姓名
               h("span", row.phone),   // 渲染电话号码
               h(NTag, {              // 渲染性别
                    type:  row.gender == 1 ? 'primary' : 'info'
                 }, { default: ()  => row.gender == 1 ? '男' : '女' }) 
             ])
        }  
    }
]

在上面的例子中，h函数有三个参数，第一个参数我们可以放html元素（比如div，span等）也可以放我们封装的组件（上面代码中的22行），第二个参数是一个对象，我们可以给第一个参数增加css样式（上面代码16行），也可以增加事件（上面代码17行），第二个参数也可以省略，若第二个参数省略时，我们渲染的值就不需要加{}（上面代码20、21行）。但如果我们第二个值写了或者就写成空对象，那么第三个参数需要写成{ default: () => { } }的形式

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！