对iview表格的列进行动态变化

解决方案

• 单表头是可以动态变化不需要增添什么东西

  
  
  单表头.png

• 多表头目前iview尚不能动态变化，会报错You may have an infinite update loop in watcher with expression "columns"解决方法是github大神提供的：需要修改iview.js源码
  

  多表头.png

  将iview.js中

columns: {
    handler: function handler() {
        var colsWithId = this.makeColumnsId(this.columns);
        his.allColumns = (0, _util.getAllColumns)(colsWithId);
        this.cloneColumns = this.makeColumns(colsWithId);

        this.columnRows = this.makeColumnRows(false, colsWithId);
        this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
        this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
        this.rebuildData = this.makeDataWithSortAndFilter();
        this.handleResize();
        },
     deep: true
   },

修改为

columns: {
     handler: function handler() {
         //[Fix Bug]You may have an infinite update loop in watcher with expression "columns"
         var tempClonedColumns = (0, _assist.deepCopy)(this.columns);
         var colsWithId = this.makeColumnsId(tempClonedColumns);
         //[Fix Bug End]
         this.allColumns = (0, _util.getAllColumns)(colsWithId);
         this.cloneColumns = this.makeColumns(colsWithId);

         this.columnRows = this.makeColumnRows(false, colsWithId);
         this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
         this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
         this.rebuildData = this.makeDataWithSortAndFilter();
         this.handleResize();
         },
      deep: true
     },

demo

<template>
  <div>
    单表头：
  <Table :columns="columns1" @on-row-click="onRowClick" :data="data1"></Table>
    多表头：
    <Table :columns="columns12" @on-row-click="onRowClick2" :data="data1" border height="500"></Table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        columns1: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          }
        ],
        data1: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ],
        columns12: [{
          title: 'Name',
          align:'center',
          children: [{
            title: 'nickName',
            key: 'name',
          },
            {
              title: 'realName',
              key: 'name'
            }
          ]
        },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          }
        ],
      }
    },
    methods: {
      onRowClick() {
        if('City'!==this.columns1[this.columns1.length-1].title) {
          this.columns1.splice(this.columns1.length, 0, {
            title: 'City',
            key: 'address'
          })
        }
      },
      onRowClick2() {
        if('City'!==this.columns12[this.columns12.length-1].title) {
          this.columns12.splice(this.columns12.length, 0, {
            title: 'City',
            key: 'address'
          })
        }
      }
    },
  }
</script>