Element table 实现点击任何一处展开行功能

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

通过设置 type=”expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

正常默认是点击行前面的向右箭头展开行，但是从用户体验上好像不是很人性化，产品经理需要点击整行的任何一处，即可展开。

实现也不是不可能，table组件提供很过的API和属性，通过组合即可实现。先设置行的 row-key 属性，然后利用 expand-row-keys 属性来控制当前展开的行，它是一个数组，可控制多行展开。最后通过 row-click 事件API来触发更新 expand-row-keys 数组。

代码实现就是

<el-table
    :row-key="(row) => { return row.id }"
    :expand-row-keys="expands"
    @row-click="clickRowHandle">
</el-table>

data() {
    return {   
      expands: [],
  },

methods: {
    clickRowHandle(row, column, event) {
        if (this.expands.includes(row.id)) {
             this.expands = this.expands.filter(val => val !== row.id);
        } else {
             this.expands.push(row.id);
        }
    }
}

好了，既然没有直接的API实现，转换思维也是可以做到的。