kaysonli / v-fit-columns

Auto fit el-table-column with cell content.

v-fit-columns

A Vue.js plugin that auto fits Element UI's el-table-column with cell content. Vue.js 插件，可实现 Element UI el-table-column 宽度自适应内容，同时保持内容不换行。

Install

npm install v-fit-columns --save

Use

In app entry file:

import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);

In your component:

<el-table v-fit-columns>
  <el-table-column label="No." type="index" class-name="leave-alone"></el-table-column>
  <el-table-column label="Name" prop="name"></el-table-column>
  <el-table-column label="Age" prop="age"></el-table-column>
</el-table>

Notes

• For columns that don't need to be fitted, add a leave-alone class by setting class-name in <el-table-column>.

v-fit-columns's Issues

望完善问题

当表格内容比较复杂存在button等其它内容时会出现BUG，望改进

fixed的列会有问题，宽度计算失败

fixed的列会有问题，宽度计算失败

页面刷新第一次进入貌似没有宽度自适应

同样的数据，计算的宽度不一样

如图所示:
同样的数据，计算出来高度不一样，页面第一次进来是201，点一下查询变139了，之后再点查询，就都是139了。

fix问题

使用fix的时候fix区域的宽度没有根据内容宽度计算

当页面有input输入框，输入任意内容，表格的宽度都会重新计算

element table 点击两次才会自动展开

和element table的show-overflow-tooltip属性起冲突

列过多时无横向滚动条 右侧列直接看不到。

作者思路可以 我尝试过若干扩展，都不太理想

我加入了 解决了不出现滚动条

.el-table__body-wrapper {
overflow: auto;
}

宽度问题

在window电脑上大屏现在宽度会出问题。