vue使用elementUI的表格，内容自适应

Posted 2023-03-19

参考技术A 1.elementUI的官方是没有这个内容自适应的功能，只能自己来写，我利用了混合的方式来实现；
首先创建minixs/flexColumnWidth.js文件；

2.在需要的页面中引用

3.此方法完美的实现了内容的自适应，但是同一个表格不建议所有的列都设置这个，若是都设置那整个表格的宽度有可能不能满屏适应，具体效果可根据自己的需要来设置；

elementUI 表格formatter属性的用法

参考技术A 用来格式化内容（字典翻译）

表格某一字段长这样：

后台返回的字段是这样的：

                                                  status: off 或者 status: on

后台提供的字典：

后台返回英文，可是要求中文展示，如果有下拉列表查询框，选择以后又要求传给后台的是英文怎么办？

我们可以在mounted的时候获取字典，然后组装一下：

statusOptions可以用来做用于筛选的下拉列表：

在表格的“状态“”这一栏使用formatter属性：

这样就可以把字段翻译成自己需要的语言，而不影响传递给后台的值。做国际化的时候很方便，因为后端返回的字典可能变成status: all: "all", off: "offline", on: "online"或者别的语言，这样做不管后端怎么变，前端完全不用修改。