element-ui table、avue-crud:树形表格懒加载 修改数据后没有重新load子集数据的解决办法

Guyue 5月前 ⋅ 226 阅读

今天在做项目时遇到了一个问题,那就是table树形数据,展开后懒加载的子节点,当我删除节点时,树形结构却不能及时的更新。

el-table解决办法:

  1. data中添加定义

maps: new Map()

  1. methods中的load方法

      load(tree, treeNode, resolve) {
           const pid = tree.id
           this.maps.set(pid,{ tree, treeNode, resolve })  //将当前选中节点数据存储到maps中
           this.$http.get(`/knowledgeBase/getListByPid/${pid}`).then( res => {
               if (res.data.code != 200) {
                   return this.$message.error(res.data.msg);
               }
               let menuList = res.data.data
               resolve(menuList)
           })
       },

  1. 删除方法

       // 删除
       deleteKnowledge(arr,row){
           this.$http.delete('/knowledgeBase',{
               data:arr
           }).then(res => {
               if (res.data.code != 200) {
                   return this.$message.error(res.data.msg);
               }
               this.$message.success('删除成功')
               this.getKonwledgeBaseList()  // 重新获取table表格
               const {pid} = row  //取出当前删除行的pid
               const { tree, treeNode, resolve } = this.maps.get(pid) //根据pid取出对应的节点数据
               this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, []); //将对应节点下的数据清空,从而实现数据的重新加载
               this.load( tree, treeNode, resolve )
           })
       },

avue-crud解决办法(案例,核心代码突出显示):

data(){

   return{

       tableOption: tableOption,

       tableData: [],

       currentId: 0,

       form:{},

       visible:false,

       maps: new Map(),

       defaultProps: {

           children: 'children',

           label: 'typeName',

       },

   }

},

treeLoad (tree, treeNode, resolve) {

this.maps.set(tree.id,{ tree, treeNode, resolve });

api.getTreeList({ id: tree.id }).then((result) => {

resolve(result.data);

})

},

handleDel(row){

   let that = this;

   that.$confirm('是否确认删除该类型"' + row.typeName + '"?', '警告', {

       confirmButtonText: '确定',

       cancelButtonText: '取消',

       type: 'warning'

   }).then(function () {

       console.log(that.$refs.crud.$refs.table.store.states.lazyTreeNodeMap)

       api.delModel({id:row.id}).then(res => {

           if(res.success){

               that.tableData = []

               that.getTypeList();

               that.$message({

                   type: 'success',

                   message: '删除成功!'

               });

               const {pid} = row  //取出当前删除行的pid

               const { tree, treeNode, resolve } = that.maps.get(pid) //根据pid取出对应的节点数据

               that.$set(that.$refs.crud.$refs.table.store.states.lazyTreeNodeMap, pid, []); //将对应节点下的数据清空,从而实现数据的重新加载

               that.treeLoad( tree, treeNode, resolve )

           }else{

               that.$message({

                   type: 'error',

                   message: res.data

               });

           }

       })

   })


全部评论: 0

    我有话说: