<el-table
:data="test.tableData" :height="tableHeight"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
sortable
fixed
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
fixed
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column> <el-table-column
prop="name"
label="姓名姓名姓名姓名姓名姓名"
sortable
width="180">
</el-table-column>
</el-table>
table设置如上,存在height动态计算高度,并且有固定列时,在界面调整列宽度后
出现固定列第一个表格错位显示问题
解决方案:
修改elementUI中table.vue中代码,再重新生成,或者直接修改element-ui\lib里的element-ui.common.js,修改代码如下:
原为
doLayout: function doLayout() {
if (this.shouldUpdateHeight) {
this.layout.updateElsHeight();
}
this.layout.updateColumnsWidth();
},
修改为:
doLayout: function doLayout() {
this.layout.updateColumnsWidth();
if (this.shouldUpdateHeight) {
this.layout.updateElsHeight();
}
}
先调整列宽度,再调整表格高度