zoukankan      html  css  js  c++  java
  • 解决element-ui table expend扩展里边需要请求表格数据第一次不渲染的问题

    原因:通过打印,发现,直接使用expend的  @expand-change 事件的时候,展开之后,才会进行乔涛表格数据的请求,这是导致数据不能够进行正常渲染的原因

    解决方式:给el-table加上几个事件  

    <el-table :data="bussinessLists"  class="m-r-t-10"  @row-click="clickRowHandle" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="bussinessExpandFn">
         <el-table-column type="expand" > </el-table-column>
    </el-table>
    @row-click 行点击的时候,这个事件可加可不加,根据自己的需要来定 ,执行的函数和
    :row-key:获取点击行的id
    :expand-row-keys:展开的行的key值得集合
    @expand-change 展开或者关闭的事件

    关键:不使用 @expand-change 事件获取到id集合,我们自己手动插入或者删除,当请求完数据的时候,我们再讲展开的id插入到expends中,我是写在了请求的后面,其实可以写在请求函数中
    bussinessExpandFn(row,expandedRows){
        if (this.expands.includes(row.id)) {
              this.expands = this.expands.filter(val => val !== row.id);
        } else {
              this.currExpendbussId = row.id;
              this.pageApp.busi_id = row.id;
              this.getAppListFn(row.id);
              this.expands.push(row.id);
         }; 
    },
    clickRowHandle(row, column, event){
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter(val => val !== row.id);
      } else {
        this.currExpendbussId = row.id;
        this.pageApp.busi_id = row.id;
        this.getAppListFn(row.id);
        this.expands.push(row.id);
      }
    },
     
  • 相关阅读:
    leetcode 114. 二叉树展开为链表
    leetcode 338. 比特位计数
    leetcode 128. 最长连续序列
    leetcode 22. 括号生成
    leetcode 200. 岛屿数量
    leetcode 70. 爬楼梯
    P6072 『MdOI R1』Path
    CF1574D The Strongest Build
    『MdOI R1』Treequery
    CF1562E Rescue Niwen!
  • 原文地址:https://www.cnblogs.com/fyjz/p/13365396.html
Copyright © 2011-2022 走看看