这种数据结构,点击扩展按钮获取此项的包含的列表数据信息。
<el-table ref="multipleTable" :data="chooseData" tooltip-effect="dark" style="width: 100%" :row-key="(row) => row.id" @expand-change="handleExpandChange" border ><el-table-column type="expand"> <template #default="props"> <div class="pl-12 pr-12"> <el-table :ref="`item${props.row.id}`" :data="props.row.itemData" size="small" border row-key="id" @selection-change="handleSelectionChange(props.row,$event)"> <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column> <el-table-column show-overflow-tooltip label="库存编号" prop="tagNum"> </el-table-column> <el-table-column show-overflow-tooltip label="库位" prop="locationName"> </el-table-column> <el-table-column show-overflow-tooltip label="现存容量" prop="capacity"> <template slot-scope="scope"> {{ scope.row.capacity }}{{ scope.row.skuCapacityUnitName }} </template> </el-table-column> </el-table> <div class="display-flex fd-row-reverse mt-20"> <!-- 表格数据的分页的功能 --> <el-pagination hide-on-single-page @current-change="changePage(props.row,$event)" :current-page="props.row.pageNum" :page-size="props.row.pageSize" background layout="total, prev, pager, next, jumper" :total="props.row.itemTotal"> </el-pagination> </div> </div> </template> </el-table-column> <el-table-column show-overflow-tooltip prop="chemicalName align="center label="化 学品名称"> </el-table-column> .... </el-table>
方法:
选中的项自动展开,点击新增按钮打开dialog并进行选中项的展开和选中回显。
add () { //tableData选中项集合 //chooseData可选的列表数据 this.bakTableData = JSON.parse(JSON.stringify(this.tableData)) this.chooseData.forEach(item => { item.multipleSelection = this.bakTableData.filter(i => i.id === item.id).length ? this.bakTableData.filter(i => i.id === item.id)[0].multipleSelection : [] item.multipleSelectionBak = this.bakTableData.filter(i => i.id === item.id).length ? this.bakTableData.filter(i => i.id === item.id)[0].multipleSelectionBak : [] }) this.chooseDialog = true this.$nextTick(() => { this.chooseData.forEach(item => { if (this.bakTableData.filter(i => i.id === item.id).length) { this.$refs.multipleTable.toggleRowExpansion(item, true) //toggleRowExpansion展开扩展按钮,展开后会调用handleExpandChange方法 } }) }) },handleExpandChange (row, expandedRows) { // 备份一下选中数据 row.multipleSelectionBak = JSON.parse(JSON.stringify(row.multipleSelection)) // 判断是打开还是收起 const index = expandedRows.findIndex(item => item.id === row.id) if (index !== -1) { // 打开 row.pageNum = 1 this.getItemData(row) } },getItemData (row) { this.$api.storage.itemList({ hxpSkuId: row.id, pageNum: row.pageNum, pageSize: row.pageSize }).then(res => { row.itemData = res.list row.itemTotal = res.total this.$nextTick(() => { const ids = row.multipleSelectionBak.map(i => i.id) row.itemData.forEach(item => { if (ids.includes(item.id)) { this.$refs[`item${row.id}`].toggleRowSelection(item, true) } }) }) }) },//页码变化时候调用
changePage (row, val) { row.pageNum = val this.getItemData(row) },