elementUI-利用Table“展开所有行”的功能扩展行内容

elementUI-利用Table“展开所有行”的功能扩展行内容

当表格一行内数据过多时，一般可以通过 单元格内换行（定宽后默认）、超长部分隐藏为“…”并用tooltip显示（el-table-column自带show-overflow-tooltip属性），或者直接给表格加滚动条 来解决。
但是当表格中仅单独一列（即某一项）的内容极多、甚至超过其他所有列之和时，这些通用方法就不那么合适了。
element官网给出了展开行的功能。点击小箭头可以展开一个扩展行。

那么当设计要求仅仅是扩展行内容、不想手动展开呢？

看以下原创例子：

实现的vue文件：

<template>
    <div class="pg-container">
        <el-table
                :expand-row-keys="expends"
                :row-key="getRowKeys"
                :data="tableData"
                class="table-class">
            <el-table-column prop="name" label="姓名" show-overflow-tooltip min-width="20%">
            </el-table-column>
            <el-table-column prop="sex" label="性别" show-overflow-tooltip
                             min-width="10%">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" show-overflow-tooltip width="120">
            </el-table-column>
            <!--注意把带行展开插槽的列元素放在容易隐藏的位置（3）-->
            <el-table-column type="expand" class-name="none-col">
                <template slot-scope="props">
                
                    <!--放扩展行内代码（1）-->
                    
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="录入时间" show-overflow-tooltip min-width="30%">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.getTableData();
        },
        data() {
            return {
                //展开行
                expends: [],
                //表数据
                tableData: [],
                testData: [
                   //测试表数据，略
                ]
            }
        },
        methods: {
            //获取表格的行id
            getRowKeys(row) {
                return row.id
            },
            //模拟获取表数据的异步函数
            getTableData() {
                let _this = this;
                setTimeout(function () {
                    _this.tableData = _this.testData;

                    //设置table中的扩展项-展开行的id（全部展开）（2）
                    let rowIds = _this.tableData.map(item => {
                        return item.id
                    });
                    _this.expends = rowIds;
                }, 2000);
            }
        }
    }
</script>
<style>
    .pg-container .table-class td.none-col .el-table__expand-icon--expanded {
        /*只能隐藏内容，隐藏整个的单元格要另想办法（3）*/
        display: none;
    }
    
    .pg-container .table-class td {
        /*注意是每个单元格有自己的下边框（4）*/
        border-bottom: unset;
    }

    .pg-container .table-class .el-table__expanded-cell {
        padding: 6px 10px 12px 10px;
         /*补上扩展行的下边框（4）*/
        border-bottom: 1px solid #ebeef5;
    }
    
	/* ......其他CSS省略*/

</style>
    

详解：

（对应代码见代码段中对应标号（1）（2）…处。）

（1）首先确认使用行展开功能、放下我们希望单独列出的过长的内容（注意type="expand"是必须的）

（2）我们希望扩展行作为表自然的一部分、免去手动一行行展开的麻烦。
先用的row-key属性设定所有行的行id，再放入设置 Table 目前的展开行的expand-row-keys中：

        <el-table
                :expand-row-keys="expends"
                :row-key="getRowKeys"
                :data="tableData"
                border
                class="table-class">

//获取表格的行id
getRowKeys(row) {
	return row.id
},
//设置table中的扩展项-展开行的id（全部展开）
let rowIds = _this.tableData.map(item => {
    return item.id
});
_this.expends = rowIds;

实际应用中表数据可能来自于异步函数的回调方法。拿到表数据之后再进行以上操作。

注意：回调方法中this的指向可能已经不是当前的vue对象，例子中用_this指代了。

（3）既然我们只需要扩展行内容、不需要“展开”和“收起”的操作，那个小箭头就不再需要了。但它的隐藏是个麻烦的问题。
实际上表格的渲染不是一下子完成的，默认表格的宽度是单元格们撑起来的。单纯的把这一列设定display: none、或者设宽度为0都是不行的，因为边框和扩展行会按它还在的宽度来显示。如果用v-if来控制、插槽中扩展行的内容也会一起消失。

这里纠结了很久之后，我想到了用“假装隐藏”的方法来解决。用户观看的逻辑和写代码的逻辑往往是不同的，“看起来实现了功能”的伪装方法还挺常用的😁当然如果有大佬有更好的解决办法也可以发出来讨论，我也学习一下~
我的解决办法：
将插槽列放在一个能确定宽度的列后面，隐藏箭头图标并去掉border，让两列融为一体~

联系方式这一类宽度在业务上是能确定的、也不会有过长显示tooltip的问题，所以把插槽列藏在这列后面~
现在功能已经基本实现啦！

（4）完善样式，将逻辑上作为同一行的数据放在一起。
这里注意，el-table中下边框是写在单元格td (和th)上的，用border-bottom: unset把组件样式顶掉、再给扩展行补上下边框，就完成了~

 .pg-container .table-class td {
     border-bottom: unset;
 }
 .pg-container .table-class .el-table__expanded-cell {
     padding: 6px 10px 12px 10px;
     border-bottom: 1px solid #ebeef5;
 }

只是一个利用组件灵活运用实现需求的小栗子，不过第一次接触的时候还是挺容易把人绕住的。el-table的复杂应用不多，值得记录一下😊

示例图片里的小图标样式用在我的项目里了（代码没有放出），所以图片拒绝拿走哦~