Element UI 表格表头可通过 columns 属性动态更改。操作步骤：1. 初始化表格；2. 添加或删除表头；3. 通过排序方法重新排序表头。
Element UI 表格表头动态改变
Element UI 提供了一种便捷的方式来动态更改表格表头。通过使用 columns 属性，可以根据需要添加、删除或重新排序表头。
操作步骤：
-
初始化表格：
const tableData = [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 }, ]; const tableColumns = [ { prop: 'name', label: 'Name' }, { prop: 'age', label: 'Age' }, ]; const table = { data: tableData, columns: tableColumns, }; -
添加表头：
table.columns.push({ prop: 'gender', label: 'Gender' }); -
删除表头：
table.columns.splice(1, 1); // 删除索引为 1 的表头
-
重新排序表头：
const newOrder = [ 'gender', 'name', 'age', ]; table.columns.sort((a, b) => newOrder.indexOf(a.prop) - newOrder.indexOf(b.prop));
注意：
- 务必使用
Vue.set方法来操作columns数组，以确保 Vue 能够检测到更改。 - 更新
columns属性后，表格将自动重新渲染。
示例：
const app = new Vue({
el: '#app',
data: {
table,
},
methods: {
addColumn() {
this.table.columns.push({ prop: 'gender', label: 'Gender' });
},
removeColumn() {
this.table.columns.splice(1, 1);
},
reorderColumns() {
const newOrder = [
'gender',
'name',
'age',
];
this.table.columns.sort((a, b) => newOrder.indexOf(a.prop) - newOrder.indexOf(b.prop));
},
},
}); 
