el-table列宽自适应

**

需求：

**
table列宽自适应 单元格内容不换行 操作列右固定 table过宽显示滚动条

1. table列宽自适应

这个好弄 网上一搜一大把 这边采用：

安装
npm install v-fit-columns --save

main.js 引入 （全局使用）
// 实现el-table 列宽自适应
import Plugin from 'v-fit-columns';
Vue.use(Plugin);

<el-table  v-fit-columns>
  <el-table-columnalign="center" label="数据" prop="shujv" ></el-table-column>
 <el-table-column align="center" label="操作"  fixed="right">
</el-table>

写到这 发现列表的确自适应了 但是缩放浏览器页面大小时 并没有按预期的 右侧操作栏固定 展示横线滚动条 并且单元格数据挤压了

2. 解决拖动页面 单元格挤压 没有自适应问题

  mounted() {
    this.getList()  // 请求列表
    window.addEventListener('resize',  this.getList)
  },

这个方法可以解决拖动页面自适应问题 但是 列表接口被多次调用了
如果有好的解决方法,欢迎留言

3.到这 列表宽度自适应了 表单没有换行 没有挤压 乍一看 没什么问题了 但是 表头什么鬼 怎么错位了
尝试了各种方法 不行 最后在掘金里看到有个大佬写的 完美解决

.el-table__header col[name="gutter"] {
       display: table-cell !important;
     }

以上解决方法来自下面两位大佬
自适应问题 https://blog.csdn.net/shykevin/article/details/116474894
错位问题 https://juejin.cn/post/6943787239138656264