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

const columns: Column[] = generateColumns(tableData.value);

columns.unshift({

key: "selection",

width: 30,

cellRenderer: ({ rowData }) => {

const onChange = (value: CheckboxValueType) => (rowData.checked = value);

return ;

},

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 (

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存在时才渲染。

:columns="columns"

:data="data"

:width="width"

:height="height"

fixed

/>

精彩链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：