說明
1、el-table-column 動態(tài)渲染
2推沸、粘貼element的源碼备绽,一試發(fā)現(xiàn)沒有問題券坞,對比我自己代碼,添加上height="500"肺素,再添加動態(tài)列恨锚,高度異常
3、解決辦法倍靡,刷新組件猴伶,調(diào)用doLayout對table進行重新繪制(ps:不加nextTick可能會無效呦)
this.$nextTick(() => {
this.$refs.singleTable.doLayout()
})
4、可歌可泣塌西,終于擺脫了以前 用v-if強制刷新表格的情況他挎,接下來我碰到的問題是 列的數(shù)據(jù)改了,但是table不更新
5捡需、對比網(wǎng)上查詢和大佬說的話 是需要加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="規(guī)培護士"
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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 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>