需求: 所选择的贴纸需要如果对应表格的的详情中的图片id相同, 进行回显
data() {
return {
list: [],
selectDialog: false, // 选择贴纸弹框
detailDialog: false, // 详情
tableList: [
{"id":28,"tags_name":"贴纸7","img_id":"[363]","img":[]},
{"id":27,"tags_name":"11","img_id":"[220]","img":[{"id":220}]},
{"id":26,"tags_name":"10","img_id":"[219]","img":[{"id":219,}]},
{"id":25,"tags_name":"9","img_id":"[218]","img":[{"id":218,"}]},
{"id":24,"tags_name":"8","img_id":"[217]","img":[{"id":217,"}]},
{"id":23,"tags_name":"贴纸七","img_id":"[214,215,216]","img":[{"id":214,},
{"id":215,},{"id":216,}]},
{"id":22,"tags_name":"贴纸六","img_id":"[213]","img":[{"id":213,}]},
{"id":21,"tags_name":"贴纸5","img_id":"[211,212]",
{"id":212,}]},
{"id":20,"tags_name":"贴纸四","img_id":"[209,210]","img":[{"id":209,},
{"id":210,}]},
{"id":19,"tags_name":"贴纸系列三","img_id":"[208]","img":[{"id":208,"}]}
], // 请求接口返回的表格
tableListcopy: [], //存储请求接口返回的表格
count: 1,
walllist: [], // 存储选择的图片
selectImg: [], // 在表格上选中的图片
}
},
在获取到tableList时进行第一次的回显
// 打开列表的弹框
selectTags() {
this.changeSeries()
this.selectImg = this.walllist.map((item) => item.id) // 直接获取对应的id会与tableListx下每一行的img进行匹配
},
changeSeries(){
// 將数据扁平化处理, 因为只需要查看tableList下的img的中id是否存在this.walllist数组中, 因为列表row的id会和row.img中的id会存在相同的情况, 所以可以将row的id进行特殊处理在后面拼接上了'---111111',这样就不会有重复的id的情况
this.tableList = this.tableList.map(item => { return { ...item, id: item.id + '---111111' } })
this.count = res.data.data.count
this.selectDialog = true
this.$nextTick(() => {
if (this.walllist.length > 0) {
this.walllist.forEach((i) => {
this.tableList.forEach((item) => {
item.img.forEach((e) => {
if (i.id == e.id) {
this.$refs.multipleTable.toggleRowSelection(item, true);
}
})
})
})
}
})
}
这个地方我们不能用select-change事件, 因为使用了这个事件将会在我回显的时候, 详情中有3张图片, 但是我只选中两个,在我为进行这个列表弹框的时候触发select-change事件, 将3张图片一起选中, 这不是我们想要的, 所以只能使用select和select-all进行触发
一个一个选择
// 选择系列
handleSelectionChange(val, row) {
if (val.find(item => item.id == row.id)) {
this.selectImg = [...new Set([row.id, ...row.img.map(item => item.id), ...this.selectImg])]
} else {
const deleteIds = [row.id, ...row.img.map(item => item.id)]
this.selectImg = this.selectImg.filter(item => !deleteIds.includes(item))
console.log(this.selectImg)
}
},
// selectAll
selectAll(selection) {
//全不选
if (selection.length == 0) {
let arr = []
arr = this.tableList.map(item => {
return [item.id, item.img.map(ii => ii.id)]
}).flat(2)
this.selectImg = this.selectImg.filter(item => !arr.includes(item))
} else {
//全选
let arr = []
arr = selection.map(item => {
return [item.id, item.img.map(ii => ii.id)]
}).flat(2)
arr.map((item, index) => {
if (this.selectImg.indexOf(item) == -1) {
this.selectImg.push(item)
}
})
}
},
在点击确定按钮后将选中的图片赋值给walllist拿到最新的图片以及id, 下一次再次进入就会选中对应的
comfirmselectDialog() {
let ary = []
ary = ary.filter(i => this.selectImg.includes(i.id))
this.$emit('getwalllist', this.walllist)
this.selectDialog = false // 关闭弹框
},