首页 > 其他分享 >elementui table type="expand" 实现点击行展开行

elementui table type="expand" 实现点击行展开行

时间:2022-10-24 09:58:26浏览次数:37  
标签:isExpansion elementui deviceList item toggleRowExpansionAll table type children

<el-table fit border size="small"  :data="deviceList" ref="dataTreeList"  @expand-change="handleExpandChange">
  <el-table-column type="expand">
    // 如果表头需要统一管理按钮 可加入以下代码
      <template slot="header" slot-scope="scope">
         <el-button type="text" size="mini" @click="toggleRowExpansion">{{ isExpansion ? "关闭" : "展开" }</el-button>
        </template>
       <template slot-scope="scope">加入需要折叠的代码</template>
  </el-table-column>
</el-table>
  /** 表格展开与关闭 */
    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
     }
}

来源:https://www.jianshu.com/p/47064ff15219

标签:isExpansion,elementui,deviceList,item,toggleRowExpansionAll,table,type,children
From: https://www.cnblogs.com/luo1240465012/p/16820493.html

相关文章

  • el-table可编辑
    原文链接:https://blog.csdn.net/hongtoushan/article/details/114130938表格上绑定的事件函数请参考elementUI官方文档场景一:整行编辑鼠标移入单元格的时候,单元格所在行......
  • ABC246F typewriter 题解
    ABC246FtypewriterSolution目录ABC246FtypewriterSolution更好的阅读体验戳此进入题面SolutionCodeUPD更好的阅读体验戳此进入题面给定$n$个字符串,字符集为小......
  • Typescript类型体操 - Fill
    题目中文Fill是javascript中常用的方法,现在让我实现类型版本的FillFill<T,N,Start?,End?>,正如你看到的那样,Fill接受四个泛型参数,其中T和N是必填参数,......
  • Typescript类型体操 - Chunk
    题目中文你知道lodash吗?lodash中有一个非常实用的方法Chunk,让我们实现它吧.Chunk<T,N>接受两个泛型参数,其中T是tuple类型,N是大于1的数字typeexp1=......
  • Typescript类型体操 - GreaterThan
    题目中文在本挑战中,你需要实现GreaterThan<T,U>,它的作用像T>U你不需要考虑负数示例:GreaterThan<2,1>//shouldbetrueGreaterThan<......
  • [Typescript] 66. Medium - IsTuple
    Implementatype IsTuple,whichtakesaninputtype T andreturnswhether T istupletype.Forexample:typecase1=IsTuple<[number]>//truetypecase2......
  • [Typescript] 65. Medium - Zip
    InThisChallenge,Youshouldimplementatype Zip<T,U>,TandUmustbe Tupletypeexp=Zip<[1,2],[true,false]>//expectedtobe[[1,true],[2,false......
  • TypeScript
    一、环境准备ts和js的区别ts属于静态类型,写代码时就能检查错误。是js的超类,包含js功能,多的是类型。js属于动态类型,只有在运行时才会报错,不会检查类型是否发生变化。......
  • Assignment 1: Abstract Data Types with C Report
    Assignment1:AbstractDataTypeswithCReportSubmissionDeadline:17:00onSunday23thOctober2020(Week8)Description:Thisassignmentcontributes3%of......
  • 【EF Core】Data Annotations之ComplexType 复杂类型
    EFCoreCodeFirst代码优先中的复杂类型复杂类型在EF4.1中很容易实现。想象客户实体类有一些像城市,邮政编码和街道的属性,我们发现把这些属性组织成一个叫地址的复杂类......