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')
希望有经验的前辈指点