vue3 虚拟table组件el-table-v2使用jsx渲染自定义组件

背景

最近一直在用 Element Plus 虚拟 Table 组件渲染自定义组件，在此记录一下

有关于 Element Plus 的虚拟 Table 组件的例子和各类属性事件等，请查看官网，

这里只说下注意事项

注意事项

在使用 Element Plus 的虚拟 Table 组件时，需要注意以下几点：

1. Table必须设置 width、height 属性，手动设置或者使用 AutoResizer 组件包裹表格组件

1. 在设置 columns 属性时，必须为每一列设置一个 width 属性，width属性的值必须是数字类型，否则会导致表格中的数据无法完全显示

开始

我们在虚拟 Table 组件中，渲染自定义单元格组件需要用到 cellRenderer 函数

以下是 CellRenderProps 的参数

type CellRenderProps<T> = {
  cellData: T
  column: Column<T>
  columns: Column<T>[]
  columnIndex: number
  rowData: any
  rowIndex: number
}

环境配置

由于 vite 搭建的项目默认不支持 jsx ，所以需要先配置环境

1. 安装 @vitejs/plugin-vue-jsx 插件

    //yarn
    yarn add @vitejs/plugin-vue-jsx -D
    //npm
    npm install @vitejs/plugin-vue-jsx -D

1. vite.config.js 配置

    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    import vueJsx from '@vitejs/plugin-vue-jsx';

    export default defineConfig({
      plugins: [vue(),vueJsx()]
    }）

代码

我们这里使用官网上的例子- 自定义单元格渲染器。不过官网的上的是 tsx ，我们这里是 jsx

我们可以在 cellRenderer 函数中可以直接使用 jsx 的语法和 UI 组件、自定义组件

一定要记得在 script 标签设置 lang 属性，如果使用的是 ts ，那么就是 lang=tsx ，如果是 js ，那就是 lang=jsx ，不然还是会报错

之前没有设置 lang=jsx 的话，也会自动设置为 jsx 。之所以现在需要取消了自动设置，是因为在特定情况下，手动设置和自动设置会冲突导致报错，详情可查看这个issue

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
    fixed
  />
</template>

<script lang="jsx" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import {
  ElButton,
  ElIcon,
  ElTag,
  ElTooltip,
  TableV2FixedDir,
} from 'element-plus'
import { Timer } from '@element-plus/icons-vue'


let id = 0

const dataGenerator = () => ({
  id: `random-id-${++id}`,
  name: 'Tom',
  date: '2020-10-1',
})

const columns = [
  {
    key: 'date',
    title: 'Date',
    dataKey: 'date',
    width: 150,
    fixed: TableV2FixedDir.LEFT,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
        {
          <span class="flex items-center">
            <ElIcon class="mr-3">
              <Timer />
            </ElIcon>
            {dayjs(date).format('YYYY/MM/DD')}
          </span>
        }
      </ElTooltip>
    ),
  },
  {
    key: 'name',
    title: 'Name',
    dataKey: 'name',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  },
  {
    key: 'operations',
    title: 'Operations',
    cellRenderer: () => (
      <>
        <ElButton size="small">Edit</ElButton>
        <ElButton size="small" type="danger">
          Delete
        </ElButton>
      </>
    ),
    width: 150,
    align: 'center',
  },
]

const data = ref(Array.from({ length: 200 }).map(dataGenerator))
</script>

这样就大功告成了

结尾

记录一下在 vite 中使用 jsx 所需的配置

最后，祝大家变得更强！

参考

element-plus虚拟化表格组件el-table-v2渲染自定义组件的其中两种方式(js和jsx)及注意事项