ElementUI实现el-table列宽自适应的代码详解
作者：香菜啵子欸
这篇文章给大家介绍了ElementUI实现el-table列宽自适应的详细步骤,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
一、安装插件
npm install v-fit-columns --save
二、入口文件引入插件
import Vue from 'vue'; import Plugin from 'v-fit-columns'; Vue.use(Plugin);
三、 示例
- 添加v-fit-columns；
- 添加class-name="leave-alone"表示这一列不受v-fit-columns影响（即不进行自适应）；
<template>
<el-table
v-fit-columns
ref='table'
:data="tableData"
style="width: 100%">
<el-table-column
class-name="leave-alone"
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
class-name="leave-alone"
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]
}
}
}
</script>
四、注意点
- 使用v-fit-columns后可能导致表头错位
解决办法：
// 使用
this.$nextTick(() => {
this.$refs.table.doLayout(); // 解决表格错位
});
// 或者
this.$forceUpdate();
// 自行实验下是否能解决表头错位问题
- 使用v-fit-columns后使用fixed可能导致表头错位；
解决办法：
不使用fixed，其他办法自行查阅资料；
到此这篇关于ElementUI实现el-table列宽自适应的代码详解的文章就介绍到这了,更多相关ElementUI el-table列宽自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！