element 树形表格
注意:getRowKey一定要
<el-table
ref="multipleTable1"
:data="tableData"
style="width: 100%"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:row-key="getRowKey"
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-table class="secondTable" :row-key="getRowKey" :ref="'child'+props.row.id" :data="props.row.children"
@selection-change="handleSelectionChange($event, props.row.id)" style="width: 100%">
<el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column>
<el-table-column prop="name" label="名称" show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="type" label="类型" show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="accuracy" label="精度" width="200"></el-table-column>
<el-table-column prop="length" label="长度"show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="action" label="操作" show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column>
<el-table-column prop="name" label="名称" show-overflow-tooltip width="200">
</el-table-column>
<el-table-column prop="type" label="显示类型" show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="createBy" label="创建者" show-overflow-tooltip width="200"></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="300"></el-table-column>
<el-table-column prop="action" label="操作">
</template>
</el-table-column>
</el-table>
// 点击展开收起函数
expandChange(row, expanded) {
console.log('点击展开',expanded.length>0?'展开':'收起')
if(expanded.length>0){
const list = this.tableData
console.log('list',list)
if(list){
this.$nextTick(() => {
list.forEach((item,index) => {
this.$refs.multipleTable1.toggleRowSelection(this.tableData.find(tx => {
return tx.id === item.id
}), true)
if(item.children){
item.children.forEach(child => {
const refChild = 'child'+item.id
this.$refs[refChild].toggleRowSelection(this.tableData[index].children.find(tx => {
return tx.id === child.id
}), true)
})
}
})
})
}
},
//选择分页
getRowKey(row) {
return row.id
},