最近在项目开发过程中遇到一个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>