最近在项目开发过程中遇到一个table嵌套table,内部table数据冲突的问题，记录一下我的解决方法避免之后再次踩坑
一、为了更好了解数据的结构我们先看一下布局
<template>
<div class="deviceManagement">
<a-table
size="small"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="data"
:pagination="false"
@expand="expand"
>
<a-table
slot="expandedRowRender"
size="small"
:columns="interiorColumns"
rowKey="key"
slot-scope="scoped"
:pagination="false"
:scroll="{ y: 300 }"
:data-source="scoped.list"
>
</a-table>
</a-table>
</div>
</template>
二、从布局中我们可以看到内部table用了外部table的数据
slot-scope="scoped"
三、现在我们就能确认我们数据的格式了
textData: [
{
id: 0, name: '损坏', number: 10, list: [{
name: 0, type: '流量控制阀', cailber: 100, desc: '备注' }] },
{
id: 1, name: '常关', number: 15, list: [{
name: 0, type: '蝶阀', cailber: 15, desc: '备注' }] }
]
四、顺便说一下说一下如何获取到这种格式的数据
1、如果数据量很小的话可以直接由后台返回
2、如果数据量很大的话，就好比我现在的情况。我是通过table的expand方法和后台交互获取到数据追加到点击的外部table数据中
getValveTypeDetails(type, index) {
getValveTypeDetail({
type }).then((res) => {
const {
status, obj } = res.data
if (status == 200) {
this.data[index - 1].list = obj
}
})
},
expand(expanded, record) {
if (expanded) {
this.getValveTypeDetails(record.name, Number(record.key))
}
}
五、附上代码
<template>
<div class="deviceManagement">
<a-table
size="small"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="data"
:pagination="false"
@expand="expand"
>
<a-table
slot="expandedRowRender"
size="small"
:columns="interiorColumns"
rowKey="key"
slot-scope="scoped"
:pagination="false"
:scroll="{ y: 300 }"
:data-source="scoped.list"
>
</a-table>
</a-table>
</div>
</template>
<script>
import Bus from '@/utils/bus'
import store from '@/store'
import {
mapMutations } from 'vuex'
import {
getInvalidType, getValveTypeDetail } from '@/api/login'
export default {
name: 'deviceManagement',
data() {
return {
selectedRowKeys: [],
selectedRows: [],
data: [],
columns: [
{
title: '类别', dataIndex: 'name', key: 'name' },
{
title: '数目', dataIndex: 'number', key: 'number' }
],
interiorColumns: [
{
title: '编号', dataIndex: 'name', key: 'name', width: '60px', ellipsis: true },
{
title: '类别', dataIndex: 'type', key: 'type', width: '80px', ellipsis: true },
{
title: '口径', dataIndex: 'cailber', key: 'cailber', width: '60px', ellipsis: true },
{
title: '描述', dataIndex: 'desc', key: 'desc', width: '120px', ellipsis: true }
]
}
},
watch: {
data: {
handler(newV) {
if (newV.length && this.selectedRows.length) {
let concatData = []
newV.forEach((item) => {
let isOk = this.selectedRows.some((elem) => {
return item.name == elem.name
})
if (isOk) {
concatData = [...concatData, ...item.list]
}
})
if (concatData.length != 0) {
Bus.$emit('nativeCustomsAndDamage', concatData)
}
}
},
deep: true
}
},
mounted() {
this.getInvalidType()
if (store.getters.deviceManagement.length) {
this.selectedRowKeys = store.getters.deviceManagement
}
},
methods: {
...mapMutations(['SET_DEVICEMANAGMENT']),
onSelectChange(selectedRowKeys, selectedRows) {
this.SET_DEVICEMANAGMENT(selectedRowKeys)
this.selectedRows = selectedRows
this.selectedRowKeys = selectedRowKeys
if (selectedRows.length == 0) {
Bus.$emit('nativeCustomsAndDamage', [])
} else {
selectedRows.forEach((item) => {
this.getValveTypeDetails(item.name, Number(item.key))
})
}
},
// 获取损坏，常关
getInvalidType() {
getInvalidType().then((res) => {
const {
status, obj } = res.data
if (status == 200) {
this.data = obj
}
})
},
// 根据类型获取列表
getValveTypeDetails(type, index) {
getValveTypeDetail({
type }).then((res) => {
const {
status, obj } = res.data
if (status == 200) {
this.data[index - 1].list = obj
}
})
},
expand(expanded, record) {
if (expanded) {
this.getValveTypeDetails(record.name, Number(record.key))
}
}
}
}
</script>
<style lang="less" scoped>
.deviceManagement {
width: 100%;
height: 100%;
overflow-y: auto;
padding: 5px;
box-sizing: border-box;
}
</style>