Element-Ui树形数据懒加载,删除到最后一个空数组不刷新问题
2023-12-26 18:02:51
使用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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!