IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Element的el-table懒加载删除后刷新子节点 -> 正文阅读

[JavaScript知识库]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);
                });
        },

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-15 22:23:40  更:2022-03-15 22:27:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:17:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码