当前位置: 代码迷 >> 综合 >> vue-antd table树形结构默认展开第一个节点和第二个节点
  详细解决方案

vue-antd table树形结构默认展开第一个节点和第二个节点

热度:77   发布时间:2023-11-29 13:50:03.0

需要配合a-table组件的一个属性一个方法,如下

:expandedRowKeys="table.expandedRowKeys"  //属性
@expand="expand"  //方法

/**
* @Author:一个帅小伙
* @Date: 2019/8/19
* @Version: 1.0
* @Last Modified by: 一个帅小伙
* @Last Modified time: 2019/8/22
**/
<comment># 组件注释项目施工区段
</comment>
<template><div id="ProjectConstructionSection" class="page-box"><div class="page-title"><Title></Title></div><div class="page-content"><div class="pannel"><div class="pannel-title"></div><div class="pannel-content"><div class="table-box"><div class="table-table"><a-skeleton active :loading="table.loading" :paragraph="{rows: 15}"><a-tablerowKey="id":expandedRowKeys="table.expandedRowKeys"@expand="expand"></a-table></a-skeleton></div><div class="table-pagination"></div></div></div></div></div></div>
</template><script>export default {name: "ProjectConstructionSection",components: {},props: {},data() {return {Util,table: {loading: false,height: 200,columns: [],searchData: [],data: [],expandedRowKeys: [],selectedRowKeys: [],plainOptions: [{ label: "施工区段名称", value: 0 },{ label: "添加时间", value: 1 },{ label: "添加人", value: 2 },{ label: "最后编辑时间", value: 3 },{ label: "最后编辑人", value: 4 }],operValue: [0, 1, 2, 3, 4],initColumns: {0: {title: "施工区段名称",dataIndex: "name",width: 450,scopedSlots: { customRender: "name" }},1: {title: "添加时间",className: "column-time",width: 150,dataIndex: "time"},2: {title: "添加人",className: "column-nature",width: 150,dataIndex: "nature",scopedSlots: { customRender: "nature" }},3: {title: "最后编辑时间",className: "column-createTime",width: 150,dataIndex: "createTime",scopedSlots: { customRender: "createTime" }},4: {title: "最后编辑人",className: "column-status",width: 150,dataIndex: "status",scopedSlots: { customRender: "status" }}}},pagination: {pageNo: 1,pageSize: 10,totalCount: 0}};},computed: {},created() {},mounted() {},watch: {},methods: {expand(e, item) {e = !e;if (e) {this.table.expandedRowKeys.splice(this.table.expandedRowKeys.findIndex(i => i == item.id),1);} else {this.table.expandedRowKeys.push(item.id);}},
/** 搜索列表*/searchList(isInit) {let response = {data: []};response.data = [{pid: "0",code: "ZZ001",name: "组织管理",children: [{pid: "ff4f7c04c55f4e23a125a840344fee24",code: "ZZ001-001",name: "组织",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "cac6e1367c4a4a7c9cf2222a689ce310",createUser: "123",updateUser: "123",updateTime: "1568798837140",createTime: "1568798837140"},{pid: "ff4f7c04c55f4e23a125a840344fee24",code: "ZZ001-002",name: "岗位",type: "group",orderNumber: 2,isPlatform: 0,appType: 1,isThird: 0,id: "3eb2f13442b7435eb1799277f6ac7a99",createUser: "123",updateUser: "123",updateTime: "1568798951747",createTime: "1568798951747"},{pid: "ff4f7c04c55f4e23a125a840344fee24",code: "ZZ001-003",name: "项目部",type: "group",orderNumber: 3,isPlatform: 0,appType: 1,isThird: 0,id: "411bd3869ad949a5abd3ae4507446ed9",createUser: "123",updateUser: "123",updateTime: "1568799052030",createTime: "1568799052030"}],type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "ff4f7c04c55f4e23a125a840344fee24",createUser: "123",updateUser: "123",updateTime: "1568798531726",createTime: "1568798531726"},{pid: "0",code: "CJ001",name: "参建单位管理",children: [{pid: "3ea1c09bdc3342008755ba41afe28a94",code: "CJ001-001",name: "参建单位",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "ec729db406e746e69420d4fd449e3abf",createUser: "123",updateUser: "123",updateTime: "1568799115466",createTime: "1568799115466"}],type: "group",orderNumber: 2,isPlatform: 0,appType: 1,isThird: 0,id: "3ea1c09bdc3342008755ba41afe28a94",createUser: "123",updateUser: "123",updateTime: "1568798605683",createTime: "1568798605683"},{pid: "0",code: "YH001",name: "用户管理",children: [{pid: "05544c6012854fd78b1825f1aab8c57e",code: "YH001-001",name: "用户",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "6dcd14f8e23e4d7abbb9066f52cd43ea",createUser: "123",updateUser: "123",updateTime: "1568800009616",createTime: "1568799986768"}],type: "group",orderNumber: 3,isPlatform: 0,appType: 1,isThird: 0,id: "05544c6012854fd78b1825f1aab8c57e",createUser: "123",updateUser: "123",updateTime: "1568798624111",createTime: "1568798624111"},{pid: "0",code: "QX001",name: "权限管理",children: [{pid: "479b3005591a464eba8ed5d95059d7d3",code: "QX001-001",name: "应用授权",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "b36ccf28494c421a86165fa5de1198d3",createUser: "123",updateUser: "123",updateTime: "1568800327867",createTime: "1568800327867"}],type: "group",orderNumber: 4,isPlatform: 0,appType: 1,isThird: 0,id: "479b3005591a464eba8ed5d95059d7d3",createUser: "123",updateUser: "123",updateTime: "1568798639096",createTime: "1568798639096"},{pid: "0",code: "JC001",name: "集成管理",children: [{pid: "d6792a336b68433e8121c3fd5439d1e0",code: "JC001-001",name: "应用集成",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "f518321d2b144b9cb411b68ee10a302d",createUser: "123",updateUser: "123",updateTime: "1568800194096",createTime: "1568800194096"}],type: "group",orderNumber: 5,isPlatform: 0,appType: 1,isThird: 0,id: "d6792a336b68433e8121c3fd5439d1e0",createUser: "123",updateUser: "123",updateTime: "1568798665251",createTime: "1568798665251"},{pid: "0",code: "YY001",name: "运营管理",children: [{pid: "207bb2fe97534725914bbcdad8a10831",code: "YY001-001",name: "平台租户",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "fd25341f9a2a430e9c741a0f53ccaa44",createUser: "123",updateUser: "123",updateTime: "1568800499130",createTime: "1568800499130"},{pid: "207bb2fe97534725914bbcdad8a10831",code: "YY001-002",name: "产品秘钥",type: "group",orderNumber: 2,isPlatform: 0,appType: 1,isThird: 0,id: "affc9213484d4b559a73608e8cba390a",createUser: "123",updateUser: "123",updateTime: "1568800767171",createTime: "1568800767171"}],type: "group",orderNumber: 6,isPlatform: 0,appType: 1,isThird: 0,id: "207bb2fe97534725914bbcdad8a10831",createUser: "123",updateUser: "123",updateTime: "1568798682074",createTime: "1568798682074"},{pid: "0",code: "YW001",name: "业务共享管理",children: [{pid: "611049b7f68f4c1398ca08580be00cb9",code: "YW001-001",name: "基础业务配置",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "c7978f71f3604d51859097ad72d27a16",createUser: "123",updateUser: "123",updateTime: "1568800880679",createTime: "1568800880679"}],type: "group",orderNumber: 7,isPlatform: 0,appType: 1,isThird: 0,id: "611049b7f68f4c1398ca08580be00cb9",createUser: "123",updateUser: "123",updateTime: "1568798706442",createTime: "1568798706442"},{pid: "0",code: "GZ001",name: "工作台",type: "group",orderNumber: 8,isPlatform: 0,appType: 1,isThird: 0,id: "34a0f7a32f9f4a608ab24929f7265c89",createUser: "123",updateUser: "123",updateTime: "1568798748882",createTime: "1568798748882"},{pid: "0",code: "AQ001",name: "安全管理系统",children: [{pid: "e2cdf81beeeb4b3baab0954f2df1d4f1",code: "AQ001-001",name: "安全巡检",type: "group",orderNumber: 1,isPlatform: 0,appType: 1,isThird: 0,id: "ed48cff8239845a8a7dfb8f68d2fd1ca",createUser: "123",updateUser: "123",updateTime: "1568893734210",createTime: "1568893734210"}],type: "group",orderNumber: 9,isPlatform: 0,appType: 1,isThird: 0,id: "e2cdf81beeeb4b3baab0954f2df1d4f1",createUser: "123",updateUser: "123",updateTime: "1568893700342",createTime: "1568893700342"},{pid: "0",code: "1234",name: "测试项目2-8",type: "group",orderNumber: 10,isPlatform: 0,appType: 0,isThird: 0,id: "29f1c8e9ba734824a910efc08f9b1ce9",createUser: "123",updateUser: "123",updateTime: "1571390905821",createTime: "1571390905821"}];this.table.loading = false;if (response.data) {this.table.data = response.data.length? Util.dealData(response.data): [];this.table.searchData = this.table.data;console.log(this.table.searchData);if (isInit) {//展开两个层级this.table.expandedRowKeys = Util.getIds(this.table.searchData);}} else {this.table.data = [];this.table.searchData = [];this.table.expandedRowKeys = [];}},},destroyed() {}
};
</script><style lang="scss">
#ProjectConstructionSection {.table-input {position: relative;.ant-input {position: absolute;top: 50%;left: 50%;min-width: 300px;max-width: 350px;margin-top: -15px;//transform: translate(-50%,-50%)}}.enableEditCol {cursor: pointer;}
}
</style>

获取最外两层ID集合 的方法

 /*** 获取最外两层ID集合* @param data* @returns {Array}*/let  Util = {}Util.getIds = function (data) {let arr = []data.length && data.forEach((item) => {if (item.children && item.children.length) {arr.push(item.id)item.children.forEach((item) => {arr.push(item.id)})}})return arr}

  相关解决方案