// 获取分页数据,第一页
td.value = [
{id: 10}, {id: 30}, {id: 70}, {id: 80}, {id: 90}
]
// 根据接口获取会显得数据
const temp2 = [
{id: 196, deviceId: 1, isDelete: false},
{id: 197, deviceId: 3, isDelete: false},
{id: 221, deviceId: 7, isDelete: false},
]
if (temp1 === null) {
// temp1 === null 初始化记录
temp1 = temp2.reduce((temp1, item) => {
temp1[item.deviceId] = item
// 选中表格
tdRef.value.toggleRowSelection(item.deviceId)
return temp1
}, {})
} else {
// temp1 !== null
Object.keys(temp1).forEach(item => {
tdRef.value.toggleRowSelection(item)
})
}
// 记录存储
// let temp1 = null
let temp1 = {
1: {id: 196, deviceId: 1, isDelete: false},
3: {id: 197, deviceId: 3, isDelete: false},
7: {id: 221, deviceId: 7, isDelete: false},
8: {deviceId: 8, isDelete: false},
10: { deviceId: 10, isDelete: false},
} as any
// 表格数据
const td = ref([])
// tdRef row-key = 'id'
const tdRef = ref()
// 多选是对数据进行存储
function handleSelectionChange (selection) {
Object.values(temp1 ).forEach((item) => {
item.isDelete = true
})
selection.forEach((item) => {
if (temp1 [item.id]) {
temp1 [item.id].isDelete = false
} else {
temp1 [item.id] = {
deviceId: item.id,
isDelete: false,
deviceName: item.deviceName,
parent: pagevalList.value.id,
deviceType: pagevalList.value.currencyOrSpecial
}
}
})
}
// 保存 对数据进行转换
const keys = Object.keys(temp1)
keys.forEach(key => {
const item = temp1[key]
!item.id && item.isDelete && delete temp1[key]
})
const arr = Object.values(temp1)
html中 设置:reserve-selection="true" row-key设置唯一值
根据接口获取表格数据和回显数据
// data 是接口返回的的表格数据
// bind 是获取回显的数据
const tableDic = data.reduce((tableDic, item) => {
tableDic[item.id] = item
return tableDic
}, {})
pages.value.total = rdata.payload.total
nextTick(() => {
if (tabularData === null) {
tabularData = bind.reduce((tabularData, item) => {
tabularData[item.deviceId] = item
return tabularData
}, {})
}
Object.keys(tabularData).forEach(key => {
tableDic[key] && multipleTableRef.value.toggleRowSelection(tableDic[key], !tableDic[key].isDelete)
})
})