vue使用ElementUI table实现展开行功能

最终效果

result.gif

使用场景

当行内容过多并且不想显示横向滚动条时 或者是需要展示当前物品下所属的资产时 可以使用 Table 展开行功能。

重点参数

expand-change： 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows：树形表格时第二参数为 expanded）
expandedRows：其实就只当前展开行的合集。
type： 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮。
toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否  参数(row,expanded expanded 为 true 则展开)

代码示例

  
    // 如果表头需要统一管理按钮 可加入以下代码
      
       
  

    /** 表格展开与关闭 */
    toggleRowExpansion(){
      if(this.deviceList.length){
        this.isExpansion = !this.isExpansion;
        this.toggleRowExpansionAll(this.deviceList, this.isExpansion);
      }
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  // 判断是否所有行都展开或者关闭
  handleExpandChange(row,rows){
    if(this.deviceList.length == rows.length){
         this.isExpansion = true
   }else{
        this.isExpansion = false
     }
}