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);
      }
    },
     
  • 相关阅读:
    OpenVAS安装过程
    网络攻防环境搭建
    kali linux 安装过程
    20159217《网络攻防实践》第三周学习总结
    网络攻防实践第二周学习总结
    移动平台课程总结
    Android实践项目汇报
    性能测试四十六:Linux 从网卡模拟延时和丢包的实现
    性能测试四十五:性能测试策略
    性能测试四十四:性能优化思路
  • 原文地址:https://www.cnblogs.com/fyjz/p/13365396.html
Copyright © 2011-2022 走看看