elementUI中动态改变表格列的问题

Question

1.需求中需要动态改变表头，一个可选列表，点击某项就增加相应的列
2.自己解决方案：
使用el-table-column的v-for循环省成表格头，当点击某个标签时往初始的表头数组中push一个新元素。
弊端：每次增加都是增加在最后一个，生成的表格不太美观。
所以在每次push之后对数组进行一步排序，对于每个表头都有一个index，根据index对数组进行排序，然后生成新的table。
3.根据此思路完成代码编写发现生成的table中的每个单元格无限长，请教大家这是什么问题？
vue代码：

 <template>
  <div>
  <el-button @click="addColumn">add column</el-button>
  <div class="table">
  <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">
  <el-table-column
          v-for="(v, i) in columns"
          :key="i"
          :prop="v.prop"
          :label="v.label"
          :width="v.width"
          ></el-table-column>
  </el-table>
  </div>
</div>
</template>

js部分

var Main = {
        methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      addColumn(){
              let self = this;
         console.log(self.columns);
         let tempCcolumns = JSON.parse(JSON.stringify(self.columns));
         tempCcolumns.push({
          index: 5,
          prop: "number",
          label: "数量",
          width: "80"});
          
          tempCcolumns.sort(function(item1,item2){
            return item1.index - item2.index
                 })
        self.columns = JSON.parse(JSON.stringify(tempCcolumns));
        console.log(self.columns);
      }
    },
    data() {
      return {
          columns:[{
            index: 2,
            prop: "date",
          label: "日期",
          width: "120"
        }, {
            index: 1,
          prop: "name",
          label: "姓名",
          width: "120"
        }, {
            index: 6,
             prop: "address",
          label: "地址"
        }],
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄',
          number: 10
        }, {
          date: '2016-05-04',
          name: '王小虎',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄',
          number: 15
        }, {
          date: '2016-05-01',
          name: '王小虎',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄',
          number: 23
        }, {
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          address: '上海市普陀区金沙江路 1518 弄',
          number: 19
        }]
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

在线链接

希望有经验的前辈指点

---

Answer 1

版本问题，新版本是没问题的，应该是在某个版本修复了，如果非要使用老版本的话，可以通过v-if来实现
https://jsfiddle.net/f4hjtczw/