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 数组。

代码实现就是

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 实现，转换思维也是可以做到的。