vue渲染函数h的使用

swag_特约男演员

于 2022-01-24 15:23:19 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端渲染函数

本文链接：https://blog.csdn.net/usernotdefined/article/details/122668273

h的使用

渲染函数参数

{
    title: '操作',
    dataIndex: 'action',
    customRender ({ text, record, index, column }) {
      return h(
        'div', {
        'class': 'operation'
      }, [
        h('a', {
          onClick: () => { console.log('showmore', record); }
        }, '查看'),
        h('span', {
          'class': 'divide'
        }),
        h('a', {
          onClick: () => { console.log('edit', column); }
        }, '编辑'),
        h('span', {
          'class': 'divide'
        }),
        h('a', {
          onClick: () => { console.log('Add', index); }
        }, '新增'),
        h('span', {
          'class': 'divide'
        }),
        h(Popconfirm, {
          title: "确定删除吗?",
          'ok-text': "确定",
          'cancel-text': "取消",
          onConfirm: () => { console.log('确定删除', text); }
        }, {
          default: () => {
            // 一般插槽在渲染函数中的应用
            return h('a', null, '删除')
          }
        })
      ])
    }

效果

在这里插入图片描述