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