elementui表格中tip设置_elementUI中动态改变表格列的问题

1.需求中需要动态改变表头，一个可选列表，点击某项就增加相应的列

2.自己解决方案：

使用el-table-column的v-for循环省成表格头，当点击某个标签时往初始的表头数组中push一个新元素。

弊端：每次增加都是增加在最后一个，生成的表格不太美观。

所以在每次push之后对数组进行一步排序，对于每个表头都有一个index，根据index对数组进行排序，然后生成新的table。

3.根据此思路完成代码编写发现生成的table中的每个单元格无限长，请教大家这是什么问题？

vue代码：

add column

v-for="(v, i) in columns"

:key="i"

:prop="v.prop"

:label="v.label"

:width="v.width"

>

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')

希望有经验的前辈指点