el-table的fixed属性导致表格错位的问题(已解决)
在引入element UI 的table组件使用过程中,业务需求要实现某列的固定,类似于excel的冻结窗口功能。这里官方提供的方式是 给 el-table的<el-table-column> 添加 fixed属性,添加后,该列不会随着横向滚动而滚动。如图所示,浅蓝色应该是对齐的。发生错位的原因,是由于table在数据请求后,渲染异常的问题;因此,解决办法就是让table重新布局。这里
·
在引入element UI 的table组件使用过程中,业务需求要实现某列的固定,类似于excel的冻结窗口功能。
这里官方提供的方式是 给 el-table的<el-table-column> 添加 fixed属性,添加后,该列不会随着横向滚动而滚动。
如图所示,浅蓝色应该是对齐的。
发生错位的原因,是由于table在数据请求后,渲染异常的问题;因此,解决办法就是让table重新布局。
这里官方提供了doLayout方法,来解决重新布局的问题
doLayout的使用方式
找到请求数据的地方,立刻获取更新后的DOM
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
// el-table加ref="multipleTable"
});
例如
我在数据请求并赋值,再进行了合并单元格操作后,加入了更新dom的操作。
getSpanArr(data) {
this.tableData1 = data;
var obj1 = {},
k1,
arr1 = [];
for (var i = 0, len = this.tableData1.length; i < len; i++) {
k1 = this.tableData1[i].catalogmodelCode; //判断的字段
if (obj1[k1]) {
obj1[k1]++;
} else {
obj1[k1] = 1;
}
}
//保存结果{el-'元素',count-出现次数}
for (var o in obj1) {
for (let i = 0; i < obj1[o]; i++) {
if (i === 0) {
this.spanArr.push(obj1[o]);
} else {
this.spanArr.push(0);
}
}
}
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
// table加ref="multipleTable"
});
},
template里面el-table增加 ref属性
<el-table
:data="tableData1"
ref="multipleTable"
>
</el-table>
看结果
更多推荐
所有评论(0)