2021-05-25 element中table表格使用 type=expand时,如果不要箭头的话也可以做到手动设置展开或关闭子级内容

背景：

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

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

<template>
  <el-table
    ref="table"
    border
    highlight-current-row
    :data="tableData"
    style="width:100%">
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
         // 这里面可以放任何任何，例如 table，form表单等等
         <el-form label-positioni="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
               <span>{{props.row.name}}</span>
            </el-form-item>
            <el-form-item label="商品描述">
               <span>{{props.row.desc}}</span>
            </el-form-item>
         </el-form>
      </template>
    </el-table-column>
    <el-table-column label="操作栏">
      <template slot-scope="scope">
         <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="name"></el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
  </el-table>
</template>

<style>
  .demo-table-expand{
     font-size:0;
  }
  .demo-table-expand label {
     width:90px;
     color:red;
  }
  .demo-table-expand .el-form-item{
     margin-right:0;
     margin-bottom:0;
     width:50%;
  }
</style>

<script>
  export default{
     data(){
       return {
          tableData:[{
             id:'acdef',
             name:'测试一',
             desc:'描述测试一',
          }],
       }
     },
     methods:{
        // 详情
        handleDetail(row){
           this.$refs.table.toggleRowExpansion(row);
        }
     }
  }
</script>

 效果：

 

 

 细节问题：

为什么会使用到这个方法（toggleRowExpansion）的原因呢？

由于 我们一般会点击按钮去展开查看详情，所以我们替换箭头为 ‘查看详情’按钮，通过 toggleRowExpansion 方法展开合闭 expand。


因为设置了 <el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距，所以，需要在最外层放一个空的div，设置样式
overflow:hidden; 再设置此 table的样式 margin-left:1px 。


重点来了， toggleRowExpansion 方法也支持手风琴效果，点击展开子级的同时关闭原先除子级之外的已打开的展开项，实现手风琴，修改 查看详情方法：

handleDetail(row){
   this.tableData5.map((item)=>{
      if(row.id != item.id){
        this.$refs.table.toggleRowExpansion(item, false);
      }
   })
   this.$refs.table.toggleRowExpansion(row);
}

table 的 toggleRowExpansion 方法可以传两个参数，第一个参数传 row, 第二个参数传 false,意思是合闭 expand。我们把每行的 expand关闭一次，
再把对应的行打开，这样就实现了手风琴效果了。

点击展开内容时，遍历外层数组，找到除了当前点击的展开项之外的行，关闭除子级之外的已展开项，然后展开或者关闭当前点击的行。

 

参考链接： https://www.cnblogs.com/jiajialove/p/11477679.html