elementui表格表头怎么动态改变

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

Element UI 表格表头动态改变

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

操作步骤：

1. 初始化表格：

   <code class="javascript">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,
   };</code>

   登录后复制

2. 添加表头：

   

   左手医生开放平台

   左医科技医疗智能开放平台

   62

   查看详情

   <code class="javascript">table.columns.push({ prop: 'gender', label: 'Gender' });</code>

   登录后复制

3. 删除表头：

   <code class="javascript">table.columns.splice(1, 1); // 删除索引为 1 的表头</code>

   登录后复制

4. 重新排序表头：

   <code class="javascript">const newOrder = [
     'gender',
     'name',
     'age',
   ];
   
   table.columns.sort((a, b) => newOrder.indexOf(a.prop) - newOrder.indexOf(b.prop));</code>

   登录后复制

注意：

• 务必使用 Vue.set 方法来操作 columns 数组，以确保 Vue 能够检测到更改。
• 更新 columns 属性后，表格将自动重新渲染。

示例：

<code class="javascript">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));
    },
  },
});</code>

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