需要配合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-table
rowKey="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
}
