el-table-v2 element plus 表格虚拟滚动渲染选择器

 <el-table-v2
      :data="data"
      :columns="Columns"
      :width="700"
      :height="400"
      fixed
      :row-class="importRowClass"
      border
      style="width: 100%"
    >
  
 

data中

 
data:(){
  return {
    data[{
      name:'lihua',
      age:18,
      isVisible:false,
      id:0
    },{
      name:'lihua',
      age:18,
      isVisible:false,
      id:1
    },{
      name:'lihua',
      age:18,
      isVisible:false,
      id:2
    }],
    Columns:[]
  }
}

需要的引入 特殊项中用到的element的其他组件，vue的组件使用vue的引入方法，引入h函数构造vnode

 
import { ElCheckbox, ElButton } from "element-plus";
import { ref, h } from "vue";

渲染列

 
//渲染前函数
//普通列
this.Columns = [
        { key: "selection", dataKey: "name", title: "名称", width: 150 },
 
      ];
//需要插入其他组件或dom节点的列依靠于自带的自定义属性cellRenderer 返回的结果需要是vnode（dom)节点,vue中可以使用jxs或h函数构造，构造属性vue3官网有参考
        this.importColumns.unshift({
        key: "handle",
        dataKey: "age",
        title: "年龄",
        width: 150,
        cellRenderer: (isReset) => {
 
   return  h(
            'div', 
            {
  style:{color:isReset.cellData>'18'?'green':'red'}
            },
            isReset.cellData
            );       
 
        },
      });
      this.importColumns.unshift({
        key: "handle",
        dataKey: "isReset",
        title: "状态",
        width: 50,
//特殊列操作函数此处为选择器
 
   cellRenderer: (value) => {
          if (value.cellData !== undefined) {
            return h(ElCheckbox, {
              modelValue: value.cellData,
              "onUpdate:modelValue": (value) => {
                this.importConfigDataMessage[value.rowData.id].isReset = value;
              },
            });
          }
        }，
//特殊列的表头，此为全选。
        headerCellRenderer: (value) => {
          const _data = unref(this.importConfigDataMessage);
          const onChange = (value) => {
            this.importConfigDataMessage.value = _data.map((row) => {
              row.isReset = value;
              return row;
            });
          };
          const allSelected = _data.every((row) => row.isReset);
          const containsChecked = _data.some((row) => row.isReset);
          return h(ElCheckbox, {
            onChange: onChange,
            value: allSelected,
            intermediate: containsChecked && !allSelected,
          });
        },
      });
      });