说明
1、el-table-column 动态渲染
2、粘贴element的源码,一试发现没有问题,对比我自己代码,添加上height="500",再添加动态列,高度异常
3、解决办法,刷新组件,调用doLayout对table进行重新绘制(ps:不加nextTick可能会无效呦)
this.$nextTick(() => {
this.$refs.singleTable.doLayout()
})
4、可歌可泣,终于摆脱了以前 用v-if强制刷新表格的情况,接下来我碰到的问题是 列的数据改了,但是table不更新
5、对比网上查询和大佬说的话 是需要加key的,所以我尝试修改key,最后成功了(开心~~~)
v-for="(tableHeaderItem,tableHeaderIndex) in allData.tableHeader"
:key="tableHeaderIndex+Math.random()"
demo
<template>
<div>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
style="width: 100%"
height="500"
class="table-fixed"
>
<el-table-column
fixed="left"
label="规培护士"
min-width="120"
align="center"
>
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column
v-for="(item,i) in obj.header"
:key="i"
property="date"
label="日期"
min-width="300"
/>
<el-table-column
property="address"
label="地址"
fixed="right"
/>
</el-table>
<div style="margin-top: 20px">
<el-button @click="handlerAddCol">
新增一列
</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
obj: {
header: [
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
},
{
startAt: '1'
}
]
},
submitLoading: false
}
},
methods: {
handlerAddCol() {
this.obj.header.push({})
this.$nextTick(() => {
this.$refs.singleTable.doLayout()
})
}
}
}
</script>