ElementUI实现el-table列宽自适应的代码详解
更新时间:2024年01月25日 10:01:35 作者:香菜啵子欸
这篇文章给大家介绍了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列宽自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
浅谈vue项目优化之页面的按需加载(vue+webpack)
本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论