Element-Ui树形数据懒加载,删除到最后一个空数组不刷新问题

发布时间:2023年12月26日

使用elemenui树形删除数据的时候刷新页面,我在网上找了好多方法,要么没用,要么都是部分代码,自己又看不懂,不得不硬着头皮看源码,发现了有个方法可以刷新。
使用elemenui树形删除数据的时候刷新页面。源码里有一个判断,如果刷新的数据等于空,那么不执行刷新方法。所以我们直接使用resolve()来刷新是行不通的。

我在网上找了好多方法,要么没用,要么都是部分代码,自己又看不懂,不得不硬着头皮看源码,发现了有个方法可以刷新。可以从res中获取数据,再把数据清空掉即可

主要代码

return {
	//不知道为什么lazyTreeNodeMap要写在states里边,有时间再研究
      states: {
        lazyTreeNodeMap: {},
      },
}
//如果是空数组,进入这个单独处理删除的方法
if (!dataArray1.length){
//把当前lazyTreeNodeMap节点的tree替换成 空数组(清空)
this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,{})
//也可以写成dataArray1,因为dataArray1就是空的
//this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap,tree,dataArray1)            
}

完整代码

<template>
  <div class="app-container">
    <div class="selfSearch" ref="selfSearch">
      <div class="search_left">
        <query :params.sync="queryParams" keywordParams="pr_name,is_entity" @finishCommit="getList">
          <el-form slot="form" class="seniorQuery" :model="queryParams" ref="queryForm" size="small" :inline="true"
                   v-show="showSearch" label-width="110px">
            <el-form-item label="编目清单名称" prop="prName">
              <el-input
                v-model="queryParams.prName"
                placeholder="请输入编目清单名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-form>
        </query>
      </div>
      <div class="search_right">
        <!--        <el-checkbox v-model="queryParams.queryChecked" label="显示全部" border @change="checkedChange"></el-checkbox>-->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['ba:baConserveBoq:add']"
        >新增
        </el-button>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </div>
    </div>

    <!--        <el-table v-if="refreshTable"
                      :data="baConserveBoqList"
                      row-key="id"
                      :default-expand-all="isExpandAll"
                      style="width: 100%; margin-bottom: 20px;"
                      border
                      lazy
                      :select-on-indeterminate="true"
                      :load="load"
                      @sort-change="sortChange"
                      @select="select"
                      @select-all="selectAll"
                      @selection-change="selectionChange" ref="multipleTable"
                      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                      :height="selfHeight" stripe>
            </el-table>-->

    <el-table
      :data="tableData1"
      row-key="id"
      :default-expand-all="isExpandAll"
      style="width: 100%; margin-bottom: 20px;"
      border
      lazy
      :load="load1"
      :select-on-indeterminate="true"
      @sort-change="sortChange"
      @select="select"
      @select-all="selectAll"
      @selection-change="selectionChange" ref="multipleTable"
      :height="selfHeight"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column sortable label="编目清单编码" align="left" prop="prCode"/>
      <el-table-column sortable label="编目清单名称" align="center" prop="prName"/>
      <el-table-column sortable label="单价" align="center" prop="price"/>
      <el-table-column sortable label="计量单位" align="center" prop="measuringUnit"/>
      <el-table-column sortable label="显示顺序" align="center" prop="num"/>
      <el-table-column sortable label="层级" align="center" prop="prLevel">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ba_boq_pr_level" :value="scope.row.prLevel"/>
        </template>
      </el-table-column>
      <el-table-column sortable label="创建时间" a
文章来源:https://blog.csdn.net/m0_74608954/article/details/135226204
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。