使用jsx写element-plus中popover组件遇到的问题

最新推荐文章于 2024-04-26 12:09:42 发布

qq_38425020

最新推荐文章于 2024-04-26 12:09:42 发布

阅读量854

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_38425020/article/details/128306059

版权

一开始的组件写法是这样的，但是一直报错。

<el-popover
            placement='top-start'
            width='200'
            popperClass='tablePopover'
            trigger='hover'
            content={row.department}
          >
    <template #reference>
      <el-button @click="visible = true">Delete</el-button>
    </template>
</el-popover>)

后面发现组件名的引用必须要使用v-slots才可以生效，后面的template做了一些调整即可：全部代码：

render: (row, index) => {
        const slot = {
          reference: () => (
            <div style={{ cursor: 'pointer'}}>{row.department}</div>
          )
        }
        return (
          <el-popover
            placement='top-start'
            width='200'
            popperClass='tablePopover'
            trigger='hover'
            disabled={vm.disabledPopover(row.department, 24)}
            content={row.department}
            v-slots={slot}
          >
          </el-popover>)

      }