解决 el-ui 树形下拉列表不刷新的问题

解决 el-ui 树形下拉列表不刷新的问题

在这里插入图片描述

解决 删除修改后 下拉列表不刷新的情况

直接附上这段代码

加入map 回调函数 后面都附有注释的!!!!

html

<!-- 数据区域 -->
    <el-table
      :data="dataList"
      v-loading="loading"
      ref="table"
      border
      highlight-current-row
      @sort-change="sortChange"
      row-key="orderNo"
      lazy
      :load="loadChild"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @current-change="selectRow"
      :class="showSearch?'showTable':'hideTable'"
    >

        

在data 中加入 map

data() {
    return {
      maps: new Map(),
}

写方法

 loadChild(tree, treeNode, resolve) {
      // 将当前选中节点数据存储到map中
      this.tre = tree.orderNo
      this.maps.set(tree.orderNo, { tree, treeNode, resolve })
      try {
        // 根据实际项目发送ajax获取数据
        getChildList({
          ParentOrder: tree.orderNo
        }).then(res => {
          const nodes = res.data.map(item => {
            return {
              ...item,
              // 该数据有三级结构
              hasChildren: item.level <= 2
            }
          })
          resolve(nodes)
        })
      } catch (error) {
        return error
      }
    } ,
// 重新触发树形表格的loadTree函数(因项目中需要多次触发loadTree方法,故封装成一个方法)
refreshLoadTree(ParentOrder) {
    // 根据父级id取出对应节点数据
    const { tree, treeNode, resolve } = this.maps.get(ParentOrder)
    this.$set(this.$refs.table.store.states.lazyTreeNodeMap, ParentOrder, [])
    if (tree) {
        this.loadChild(tree, treeNode, resolve)
    }
},

最后在提交按钮里 重置上面的方法

 /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.orderNo != undefined && this.opertype === 2) {
            updateBWorkOrder(this.form)
              .then((res) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
                this.refreshLoadTree(this.tre)

              })
              .catch((err) => {
                //TODO 错误逻辑
              })
          } else {
            console.log(this.form)
            addBWorkOrder(this.form)
              .then((res) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
                this.refreshLoadTree(this.tre)
              })
              .catch((err) => {
                //TODO 错误逻辑
              })
          }
        }
      })
    },

最后 就完成啦 如果可以帮到你 他的价值就有了!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是貔貅喔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值