在element-plus虚拟化表格中使用tsx和slot插槽自定义渲染单元格

Proletariat.

已于 2023-11-20 20:30:39 修改

阅读量1.7k

点赞数 3

文章标签： java 前端 javascript vue.js typescript

于 2023-07-09 02:23:49 首次发布

本文链接：https://blog.csdn.net/m0_61395091/article/details/131618720

版权

在element-plus虚拟化表格中，根据官网描述，定义列的参数是这样的：

const columns = [
  {
    dataKey: 'id',
    key: 'id',
    title: 'ID',
    width: '100'
  },
  {
    dataKey: 'name',
    key: 'name',
    title: '姓名',
    width: '100'
  },
  {
    dataKey: 'age',
    key: 'age',
    title: '年龄',
    width: '100'
  },
]

使用cellRenderer可以自定义渲染列的内容，比如将姓名列渲染成按钮：

const columns = [
  {
    dataKey: 'id',
    key: 'id',
    title: 'ID',
    width: '100'
  },
  {
    dataKey: 'name',
    key: 'name',
    title: '姓名',
    width: '100'，
//-----------------可以将cellData输出一下，观察内部的结构---------------------
    cellRenderer: (cellData: any) => (
      <el-button link type="primary" onClick={() => console.log(cellData)}>
        {cellData.rowData.name}
      </el-button>
    )
  },
  {
    dataKey: 'age',
    key: 'age',
    title: '年龄',
    width: '100'
  },
]

那么如何在上面的tsx中使用插槽，例如element-plus的el-popconfirm，el-popover等，或是我们自定义的组件。

以el-popconfirm为例，组件需要在内部嵌套一个元素，并使用#reference：

tsx中使用插槽，不支持直接嵌套，例如：

const columns = [
  {
    dataKey: 'id',
    key: 'id',
    title: 'ID',
    width: '100'
  },
  {
    dataKey: 'name',
    key: 'name',
    title: '姓名',
    width: '100'，
    cellRenderer: (cellData: any) => {

//-----------------错误的写法---------------------------
        return(
          <ElPopconfirm
            title="是否确认删除此列？">

            <template v-slot="reference">
              <el-button>
                删除 {cellData.rowData.name}
              </el-button>
            </template>

          </ElPopconfirm>
        )
//------------------------------------------------------

  },
  {
    dataKey: 'age',
    key: 'age',
    title: '年龄',
    width: '100'
  },
]

在tsx中只允许扁平化地使用插槽(不使用插槽的元素可以正常嵌套)，用法:

const columns = [
  {
    dataKey: 'id',
    key: 'id',
    title: 'ID',
    width: '100'
  },
  {
    dataKey: 'name',
    key: 'name',
    title: '姓名',
    width: '100'，
    cellRenderer: (cellData: any) => {

//----------------------正确的写法---------------------------
      const slots = {
        reference: () => 
            <el-button link type="primary">
            删除 {cellData.rowData.name}
            </el-button>
      }
//----------------然后在下面通过v-slots使用-------------------
        return(
          <ElPopconfirm
            title="是否确认删除此列？"
            v-slots={slots}
          >
          </ElPopconfirm>
    )
  },
  {
    dataKey: 'age',
    key: 'age',
    title: '年龄',
    width: '100'
  },
]

今天来纠正一下上面的错误，tsx中插槽可以嵌套，如下：