实现效果

一、JSX安装

由于vite搭建的项目默认不支持jsx，需要先安装@vitejs/plugin-vue-jsx插件并在vite.config.js中配置：

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

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()]
 }）

二、VUE文件里使用

<template>
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2
                :columns="columns"
                :data="datas"
                :width="width"
                :height="tableHeight"
                fixed
              />
            </template>
          </el-auto-resizer>
</template>

<script lang="jsx" setup>
import { ref } from "vue";


let id = 0

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


const SelectionCell = ({
  value,
  intermediate = false,
  onChange,
}) => {
  return (
    <ElCheckbox
      onChange={onChange}
      modelValue={value}
      indeterminate={intermediate}
    />
  )
}


const columns = [
  {
    key: 'date',
    title: 'Date',
    dataKey: 'date',
    width: 150,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={date}>
        {
          <span class="flex items-center">
            <ElIcon class="mr-3">
              <Timer />
            </ElIcon>
            {date}
          </span>
        }
      </ElTooltip>
    ),
  },
  {
    key: 'name',
    title: 'Name',
    dataKey: 'name',
    width: 300,
    align: 'center',
    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
  },
  {
    key: 'operations',
    title: 'Operations',
    width: 250,
    cellRenderer: (cellData) => (
      <>
        <ElButton size="small" link onClick={downLoadThis.bind(this, cellData)}>导出Excel</ElButton>
        <ElButton size="small" type="danger">
          计算汇总结果
        </ElButton>
      </>
    ),
    align: 'center',
  },
]

const datas = ref(Array.from({ length: 1600 }).map(dataGenerator))


columns.unshift({
  key: 'selection',
  width: 50,
  cellRenderer: ({ rowData }) => {
    const onChange = (value) => (
      rowData.checked = value
      )
      
    return <SelectionCell value={rowData.checked} onChange={onChange} />
  },
  headerCellRenderer: () => {
    const _data = unref(datas)
    const onChange = (value) =>
      (datas.value = _data.map((row) => {
        row.checked = value
        return row
      }))
    const allSelected = _data.every((row) => row.checked)
    const containsChecked = _data.some((row) => row.checked)

    return (
      <SelectionCell
        value={allSelected}
        intermediate={containsChecked && !allSelected}
        onChange={onChange}
      />
    )
  },
})

/** 点击事件  */
const downLoadThis = (row) => {
  console.log(row.rowData);
};



</script>