elementui表格表头怎么动态改变

element ui 表格表头可通过 columns 属性动态更改。操作步骤：1. 初始化表格；2. 添加或删除表头；3. 通过排序方法重新排序表头。

Element UI 表格表头动态改变

Element UI 提供了一种便捷的方式来动态更改表格表头。通过使用 columns 属性，可以根据需要添加、删除或重新排序表头。

操作步骤：

1. 初始化表格：

   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,
   };

   登录后复制

2. 添加表头：

   table.columns.push({ prop: 'gender', label: 'Gender' });

   登录后复制

3. 删除表头：

   table.columns.splice(1, 1); // 删除索引为 1 的表头

   登录后复制

4. 重新排序表头：

   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表格表头怎么动态改变的详细内容，更多请关注IT视界其它相关文章！