vue3+elementPlus表格嵌套外层表格多选联动内层表格选中状态

问题描述

最近要实现的一个功能，两层表格嵌套，外层表格多选需要关联到内层表格数据的选中状态。如果是普通的树形表格，多选全选都可以正常选到数据的子级，问题是嵌套的表格勾选外层数据无法关联到里面的表格。

解决思路：监听外层表格选中数据，

el-table代码

		<!-- 外层表格 -->
		<el-table :data="tableData" @selection-change="handleOuterSelectionChange" default-expand-all>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="expand" >
                <template #default="scope">
                    <div class="nested-table-container">
                    	<!-- 内层表格 -->
                        <el-table :id="scope.row.dataId" :ref="el=>getimgManageRef(el, scope.row.dataId)" :data="scope.row.children" style="width: 100%" @selection-change="handleImgSelection">
                            <el-table-column type="selection" width="45" align="center" ></el-table-column>
                            <el-table-column prop="feenm" label="拇指图" align="center">
                                <template #default="prop">
                                    <img @click="srcImgDetail(prop.row.browseImageRelativeLocation)"
                                    :src="browseImageUrl+ prop.row.browseImageRelativeLocation" class="img" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="productId" label="产品号" align="center"></el-table-column>
                            <el-table-column prop="satelliteId" label="卫星" align="center"></el-table-column>
                            <el-table-column prop="sensorId" label="传感器" align="center"></el-table-column>
                            <el-table-column prop="productLevel" label="级别" align="center"></el-table-column>
                            <el-table-column prop="createTime" label="采集时间" align="center"></el-table-column>、
                            <el-table-column :label="$t('operation')" align="center">
                              <template #default="scope">
                                <!-- 详情 -->
                                <el-tooltip class="box-item" effect="dark" :content="$t('Checkdetails')" placement="bottom">
                                  <el-button type="success" @click="viewDetail(scope.row)" :icon="Search" circle />
                                </el-tooltip>
                              </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="dataName" label="名称" align="center" width="200"></el-table-column>
            <el-table-column prop="describe" label="描述" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        </el-table>

后端返回数据格式：监听外层表格选中数据变化，手动勾选对应的子级表格

const selectedOutRows = ref({});  //外层表格勾选数据
  // 外层表格行勾选事件
const handleOuterSelectionChange = (selection) => {
  selectedOutRows.value = {} //先清空
  selection.forEach((item) => {
    if (!selectedOutRows.value[item.dataId]) {
      if(item.children){
        selectedOutRows.value[item.dataId] = item.children.map((innerItem) => innerItem);
      }
    }
  });
};

// 内层表格ref 实例  
// 需要注意的是，el-table需要是展开状态（default-expand-all），折叠起来的话获取不到内层表格ref实例
const imgManageRefList = ref([])   
const getimgManageRef = (el, dataId) => {
  if(el){
    imgManageRefList.value[dataId] = el
  }
}

//表格数据 
const tableData = ref([])

// 监听selectedOutRows的变化，实现自动勾选内层表格
watch(selectedOutRows, (newVal) => {
  // 先清除所有内层勾选
  tableData.value.forEach(row => {
    imgManageRefList.value[row.dataId].clearSelection()
  })
  // 再根据外层勾选去勾选内层表格
  for (const dataId in newVal) {
    if (newVal[dataId]) {
      // 这里外层表格每行数据的dataId是唯一的
      const outerRow = tableData.value.find((row) => row.dataId === dataId);
      if (outerRow) {
        // 将内层表格的数据设置为勾选状态
        outerRow.children.forEach((innerItem) => {
            // 这里需要根据实际的内层表格组件API进行调整
            imgManageRefList.value[dataId].toggleRowSelection(innerItem, true);
        });
      }
    }
  }
}, { deep: true });


// 内层表格选择发生改变
const handleImgSelection = (selectionList) => {
  let selectRowsList = []
  tableData.value.forEach(row => {
    // 通过每个内层表格的ref实例的getSelectionRows方法获取已选中数据
    selectRowsList.push(imgManageRefList.value[row.dataId].getSelectionRows())
  })
}

目前只写了外层表格多选关联内层表格，内层还没有关联上外层