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);
      }
    },
     
  • 相关阅读:
    matplotlib数据可视化之柱形图
    xpath排坑记
    Leetcode 100. 相同的树
    Leetcode 173. 二叉搜索树迭代器
    Leetcode 199. 二叉树的右视图
    Leetcode 102. 二叉树的层次遍历
    Leetcode 96. 不同的二叉搜索树
    Leetcode 700. 二叉搜索树中的搜索
    Leetcode 2. Add Two Numbers
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/fyjz/p/13365396.html
Copyright © 2011-2022 走看看