爱站工具查询,深一集团的网站谁做的,在线设计装修户型图,wordpress 响应速度慢目录 1. 代码实现2. 效果图3. 解决新增、删除、修改之后树节点不刷新问题。#xff08;[参考文章](https://blog.csdn.net/weixin_41549971/article/details/135504471)#xff09; 1. 代码实现
templatediv!-- lazy 是否懒加载子节点数据 --!-… 目录 1. 代码实现2. 效果图3. 解决新增、删除、修改之后树节点不刷新问题。[参考文章](https://blog.csdn.net/weixin_41549971/article/details/135504471) 1. 代码实现
templatediv!-- lazy 是否懒加载子节点数据 --!-- load 加载子节点数据的函数lazy 为 true 时生效函数第二个参数包含了节点的层级信息 --!-- :default-expand-alldefaultExpandAll 是否默认展开所有行当 Table 包含展开行存在或者为树形表格时有效 --!-- expand-row-keys 可以通过该属性设置 Table 目前的展开行需要设置 row-key 属性才能使用该属性为展开行的 keys 数组。 --!-- row-click 当某一行被点击时会触发该事件 --!-- expand-change 当用户对某一行展开或者关闭的时候会触发该事件展开行时回调的第二个参数为 expandedRows树形表格时第二参数为 expanded --el-table reftableRef :datadeptList row-keydeptId :lazytrue :loadload:tree-props{ children: children, hasChildren: existSub } :expand-row-keysexpandRowKeysrow-click(row, column, e) clickRowLoad(row, column, e) expand-changehandleExpandChangeel-table-column propdeptName label名称 min-width260 /el-table-column proporderNum label排序 /el-table-column label创建时间 aligncenter propcreateTime min-width200template slot-scopescopespan{{ (scope.row.createTime) }}/span/template/el-table-columnel-table-column label操作 aligncenter fixedright min-width220template slot-scopescopeel-button sizemini typeprimary click.stopclickHandle(scope.row)查看/el-button/template/el-table-column/el-table/div
/templatescriptexport default {name: TablePage3,data() {return {// 模拟数据1deptList_01: [{createTime: 2023-10-23 11:39:03,deptId: 2104,deptName: 部门1,parentName: null,parentId: 0,orderNum: 0,children: [],existSub: true,},{createTime: 2023-10-23 11:39:03,deptId: 2105,deptName: 部门2,parentName: null,parentId: 0,orderNum: 1,children: [],existSub: true,},{createTime: 2023-10-23 11:39:03,deptId: 2106,deptName: 部门3,parentName: null,parentId: 0,orderNum: 2,children: [],existSub: false,}],// 模拟数据2deptList_02: [{createTime: 2023-10-23 11:39:03,deptId: 21041,deptName: 部门1-1,parentName: null,parentId: 2104,orderNum: 1,children: [],existSub: false,},{createTime: 2023-10-23 11:39:03,deptId: 21042,deptName: 部门1-2,parentName: null,parentId: 2104,orderNum: 1,children: [],existSub: false,},],// 模拟数据3deptList_03: [{createTime: 2023-10-23 11:39:03,deptId: 21051,deptName: 部门2-1,parentName: null,parentId: 2105,orderNum: 1,children: [],existSub: true,},],// 模拟数据4deptList_04: [{createTime: 2023-10-23 11:39:03,deptId: 210511,deptName: 部门2-1-1,parentName: null,parentId: 21051,orderNum: 1,children: [],existSub: false,},],// 部门表格树数据deptList: [],// 重新渲染表格状态refreshTable: true,//父级的IdparentId: ,expandRowKeys: [],};},mounted() {// 列表this.getList()},methods: {/** 查询列表 懒加载 */getList() {//根据实际项目调用接口// lazyList(this.queryParams).then(response {// console.log(response, response查询列表)// this.deptList response.data// }) // 模拟数据1this.deptList this.deptList_01;this.deptList.forEach(item {item.hasChildren item.existSub})// 如果只是单纯的更新绑定的数据:是在重新加载时清空对应ref下的这两个数据// this.$set(this.$refs[tableRef].store.states, lazyTreeNodeMap, {});// this.$set(this.$refs[tableRef].store.states, treeData, {});console.log(this.deptList, this.deptList)// ------------触发点击事件load------------------//一、-------默认展开了deptList的第一层所有数据的下级数据--------// 一、-------默认展开了deptList的第一层所有数据的下级数据(相当于自动点击了一次)--------this.openTreeHandle(this.deptList)//二、 展开所有行建议直接使用非懒加载配置default-expand-all为true},// 点击列表懒加载load(tree, treeNode, resolve) {console.log(tree, tree)// console.log(treeNode, treeNode)//根据实际项目调用接口获取对应的下级数据// this.parentId tree.deptId// lazyList(this.queryParams).then(res {// console.log(res.data, res.data)// resolve(res.data)// })// 模拟数据2模拟数据3, 模拟数据4let tempList []if (tree.deptName 部门1) {tempList this.deptList_02} else if (tree.deptName 部门2) {tempList this.deptList_03} else if (tree.deptName 部门2-1) {tempList this.deptList_04}resolve(tempList)},// 一、-------根据接口得到deptList根据实际需要获取需要展开的节点的id也就是table绑定的row-key属性值如deptId--------openTreeHandle(deptList) {const deptId deptList ? deptList.map(item (item.deptId).toString()) : []// expandRowKeys 可以通过该属性设置 Table 目前的展开行需要设置 row-key 属性才能使用该属性为展开行的 keys 数组// 这个必须配置只有配置了这个getElementsByClassName才能获取到对应的数据els下面click事件才会触发this.expandRowKeys this.expandRowKeys.concat(deptId)console.log(this.expandRowKeys, this.expandRowKeys)const els document.getElementsByClassName(el-table__expand-icon el-table__expand-icon--expanded)this.$nextTick(() {console.log(els, els)console.log(els.length, els.length)if (els.length 0) {for (let i 0; i els.length; i) {els[i].click()}}})},// 展开改变触发函数,只展开一行handleExpandChange(row, expandedRows) {// console.log(row, row)// console.log(expandedRows, expandedRows)if (expandedRows.length 1) {this.$refs.tableRef.toggleRowExpansion(expandedRows[0])}},//点击整行load (能够点击一行的任意位置都可以进行伸缩)clickRowLoad(r, c, e) {if (e.currentTarget e.currentTarget.firstElementChild.firstElementChild.firstElementChild) {console.log(e.currentTarget, e.currentTarget)if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName DIV) {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()} else {e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()}}},clickHandle(row) {console.log(row, 点击)},},
};
/script
2. 效果图 3. 解决新增、删除、修改之后树节点不刷新问题。参考文章
