Vue+ElementUI 可变列表格（Table）（为什么超出了，也不显示横向滚动条）

什么叫可变列表格？

顾名思义，就是Table的Column的数量是可变的，可能是3个、4个，或者5个。

如下图：

image.png

image.png

那么，可变列列表的应用场景是什么？

通常，在开发的过程中，总是会遇到在一个列表中根据不同的用户角色和业务场景，展示不同的内容给用户看的需求。

这个时候，我们的可变列表格就有登场的机会了。

当然，你也可以通过v-if控制显示的列。

但是，我觉得用可变列表格的方式可以更灵活、省事。

不仅是这种情况，在所有的需要表格的列的数量不固定的情景中都可以用，比如数据列表模板什么的。

怎么实现可变列表格？或者说具体思路是怎么样的？

1、我们先提出一个设想，在element中，table是由很多个el-table-column构成的，那么我们可不可以通过循环el-table-column构造一个table？

2、要循环el-table-column，那么我们就需要一个由多个列组成的集合，他有3个字段，分别是列名、列显示文本和列宽，如下

        tableCols1: [
                   {
                       name: "date",
                       label: "日期",
                       width: 180
                   },
                   {
                       name: "name",
                       label: "姓名",
                       width: 180
                   },
                   {
                       name: "address",
                       label: "地址",
                       width: 280
                   },
               ]

3、利用v-for循环列集合，构造列表，把name、label、width绑定到el-table-column

4、绑定数据

  tableData1: [{
                   date: '2016-05-02',
                   name: '王小虎',
                   address: '上海市普陀区金沙江路 1518 弄'
               }, {
                   date: '2016-05-04',
                   name: '王小虎',
                   address: '上海市普陀区金沙江路 1517 弄'
               }, {
                   date: '2016-05-01',
                   name: '王小虎',
                   address: '上海市普陀区金沙江路 1519 弄'
               }, {
                   date: '2016-05-03',
                   name: '王小虎',
                   address: '上海市普陀区金沙江路 1516 弄'
               }]

5、可变列表格就此完成，效果如下

image.png

全部代码，粘上去就可以看效果

效果图

image.png

原文链接：https://blog.csdn.net/u012835032/article/details/108935788

仿照博主的代码写了一个vue版本

上述代码存在两个问题

1、查询出的结果是多条的时候有横向滚动条，当查询出的数据只有一条时，横向滚动条不出现。

解决方案

直接在标签上的

标签上固定宽度，注意这个值要设置的大一些

2、使用height="430px" 当数据只有一条时，会有很大空白

如图：

image.png

解决方案
给 标签上的height="430px" 换成max-height="430px" 这样表格就能根据返回数据的多少自动定位了。

改完之后

image.png