ElementUI-Plus虚拟化表格的使用

虚拟化表格在案例中是自己生成了一个数组并展示

const columns: Column<any>[] = generateColumns(tableData.value);
columns.unshift({
  key: "selection",
  width: 30,
  cellRenderer: ({ rowData }) => {
    const onChange = (value: CheckboxValueType) => (rowData.checked = value);
    return <SelectionCell value={rowData.checked} onChange={onChange} />;
  },

  headerCellRenderer: () => {
    const _data = unref(data);
    const onChange = (value: CheckboxValueType) =>
      (data.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}
      />
    );
  },
});

这一段是复选框的逻辑，不用改。

需要改的只有generateColumns列的生成和数据的绑定generateData

const generateColumns = (data: any[]) => {
  return ["name", "sex", "status"].map((key) => ({
    key,
    dataKey: key,
    title: key.charAt(0).toUpperCase() + key.slice(1),
    width: 150,
  }));
};

const generateData = (data: any[]) => {
  return data.map((item, index) => ({
    ...item,
    id: `row-${index}`,
    checked: false,
    parentId: null,
  }));
};

生成列的要点在于给出列的值，重点是这个dataKey。

列的dataKey用于和数据的key值绑定。

比如列：

const columns = [
  { key: 'name', dataKey: 'name', title: 'Name', width: 150 },
  { key: 'sex', dataKey: 'sex', title: 'Sex', width: 150 },
  { key: 'status', dataKey: 'status', title: 'Status', width: 150 },
];

数据：

const data = [
  { name: 'John', sex: 'male', status: 'active' },
  { name: 'Sarah', sex: 'female', status: 'inactive' },
  // ... 其他数据对象
];

这样每个列的dataKey都会找到数据的key，比如dataKey: 'name’就会展示 name: 'xxx’中的xxx

总的来说其实需要改的主要是两个函数generateData和generateColumns ，生成展示数据和列数据。
这两个函数实现的功能是：传入自己的数据（都是数组），之后在内部遍历并为所有数组的每个元素都加上案例中的属性：例如generateData中就是加上了这三个属性：

	id: `row-${index}`,
    checked: false,
    parentId: null,

和Table表格不同
展示数据的时候，如果是提前准备好的静态数据就没什么。
如果是需要axios请求获取到的数据就需要做好判断。
这里我加上了对数据的判断，只有data存在时才渲染。

<el-table-v2 v-if="data && data.length > 0"
          :columns="columns"
          :data="data"
          :width="width"
          :height="height"
          fixed
        />