elementui表格表头怎么动态改变
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)); }, },});

登录后复制

以上就是elementui表格表头怎么动态改变的详细内容，更多请关注范的资源库其它相关文章！

<

转载请注明：范的资源库 » elementui表格表头怎么动态改变