<el-table ref="multipleTable" v-loading="loading" :data="tableData"
:row-key="getRowKeys" stripe
@selection-change="onSelectionChange"
@select="selectTion"
@select-all="selectAll">
<el-table-column :selectable="selectable" :key="index" align="center" type="selection" width="55px" reserve-selection></el-table-column>
</el-table>
watch: {
tableData: {
handler(val) {
this.backSelect()
}
}
},
methods: {
// 全选
selectAll(selection) {
console.log(selection)
if (selection.length > 0) {
let list = this.selectionList?.map((v) => v.resumeId)
selection.forEach((i) => {
if (!list.includes(i.resumeId)) {
this.selectionList.push(i)
}
})
} else {
let resumeIdLise = this.tableData.map((i) => i.resumeId)
let val = this.selectionList.filter((v) => !resumeIdLise.includes(v.resumeId))
// this.$emit('update:selectionList', val)
this.$emit('updateSelectionList', val)
}
},
selectTion(selection, row) {
// console.log('--- selection ---', selection, row)
const index = this.selectionList.findIndex((i) => i.resumeId == row.resumeId)
if (index !== -1) {
this.selectionList.splice(index, 1)
} else {
this.selectionList.push(row)
}
},
getRowKeys(row) {
return row.resumeId
},
// 反选 (只需要在每次获取列表数据的时候反选)
backSelect() {
if (this.tableData?.length > 0 && this.selectionList?.length > 0) {
console.log(this.tableData, 'this.tableData')
this.$refs['TableList'].$refs['multipleTable'].clearSelection() // 清除之前页面的选中状态
this.$nextTick(() => {
this.selectionList.forEach((v) => {
let item = this.tableData.find((obj) => {
return obj['resumeId'] === v['resumeId']
})
if (item) {
this.$refs['TableList'].$refs['multipleTable'].toggleRowSelection(item)
}
})
})
}
},
// 禁用选择框
selectable() {
if (this.selectionList && this.selectionList.length >= 20) {
this.$message.warning('最多选择20个简历数据')
return false
}
return true
},
// 删除
onDel(item, index) {
this.selectionList.splice(index, 1)
if (item) {
this.$nextTick(() => {
this.$refs['TableList'].$refs['multipleTable'].toggleRowSelection(item, false)
})
} else {
this.$nextTick(() => {
this.$refs['TableList'].$refs['multipleTable'].clearSelection()
})
}
},
// 弹窗 取消
onCancel() {
this.visible = false
this.pageInfo['pageNum'] = 1
},
// 弹窗 确定
onConfirm() {
this.loading = true
if (this.selectionList && this.selectionList.length === 0) {
this.loading = false
return this.$message.warning('请选择简历数据')
}
this.$emit('onConfirm', this.selectionList, this.index)
this.visible = false
this.loading = false
this.pageInfo['pageNum'] = 1
// this.$emit('update:selectionList', [])
// this.selectionList = []
},
// 下载简历
download(row) {
if (row.resumeFile.fileInnerUrl) {
let a = document.createElement('a')
a.style.display = 'none'
a.href = row.resumeFile.fileInnerUrl
document.body.appendChild(a)
a.click()
}
}
}
el-table多选翻页选中(后端分页)
于 2024-07-15 17:51:01 首次发布