Element的el-table懒加载删除后刷新子节点

data() {
        return {     
            tableData: [], //列表数据         
            maps:new Map(),//储存 子菜单信息
        };
    },
<el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          border
          lazy
          :load="loadChild"
          v-loading="loading"
          ref="table"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="QC"
            label="机构名称"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="BSM"
            label="标识码"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="LXDH"
            min-width="150"
            label="联系电话">
          </el-table-column>
          <el-table-column
            prop="CJSJ"
            min-width="150"
            label="创建时间">
          </el-table-column>
          <el-table-column label="操作"
                           width="350"
                           fixed="right"
                           align="center">
            <template slot-scope="scope">              
              <el-button type="text"
                         icon="el-icon-delete"
                         :disabled="qxzt.sc == undefined ? true:!qxzt.sc"
                         :class="(qxzt.sc == undefined ? true:!qxzt.sc) ? '' : 'red' "
                         @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

// 删除操作
        handleDelete(index, row) {
            var that = this;
            let delid=row.id;
            let fuid='';
            if(typeof delid ==  'string'){
                let index = delid.indexOf('_');//获取“_”首次出现的位置
                fuid=row.id.substring(0,index);
                delid = delid.substring( index + 1 );
            }
            // 二次确认删除
            that.$confirm('确定要删除吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    axios
                        .ajax({
                            method: 'GET',
                            url: url.xtgl.deptremove,
                            params: {
                                deptId: delid
                            }
                        })
                        .then((res) => {
                            if (res.code == 200) {
                               // that.tableData.splice(index, 1);
                                this.$message.success(res.msg);
                                setTimeout(function() {
                                    let allzjd=[]
                                    that.tableData.forEach(function(v,i) {
                                        if(v.ID==fuid){
                                            allzjd=v.children
                                        }
                                    });
                                    let delzjdsy=''
                                    allzjd.forEach(function(k,w) {
                                        if(k.ID == delid){
                                            delzjdsy=w
                                        }
                                    });
                                    allzjd.splice(delzjdsy, 1);
                                    that.$set(that.$refs.table.store.states.lazyTreeNodeMap,fuid,allzjd)
                                },800)
                            } else {
                                that.$message.success(res.msg);
                            }
                        });
                })
                .catch(() => {
                    that.$message.success('取消删除');
                });
        },
        //加载子菜单
        loadChild(tree, treeNode, resolve) {
            const pid = tree.id;
            this.maps.set(pid,{tree,treeNode,resolve})
            axios
                .ajax({
                    method: 'get',
                    url: url.xtgl.deptlist,
                    params: {
                        FJBSM: tree.BSM
                    }
                })
                .then((res) => {
                    let resolvedata = res.data;
                    resolvedata.forEach(function(v, i) {
                        v.id = tree.id + '_' + v.ID;
                        v.zbm = false;
                    });
                    tree.children=resolvedata
                    resolve(resolvedata);
                });
        },

主要代码

that.$set(that.$refs.table.store.states.lazyTreeNodeMap,parentId,childrenData)

后边两个参数传值,parenntId是父级ID,childrenData是你刷新子级的数组,

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值