需求：勾选列表中数据，提交
取消勾选时，出现提示
使用selection-change和select一起实现
html部分
<template>
<div class="somecls">
<el-table
ref="someTable"
v-loading="loadingStatus"
:data="someData"
empty-text="赞无数据，请去配置添加"
@selection-change="selectChange"
@select="selectHandle"
>
<el-table-column type="selection" width="55" prop="selection" />
<el-table-column type="selection" prop="someName" />
</el-table>
</div>
</template>
这里使用
ref的原因是用来设置选中状态
js部分
private selectHandle(selection:any, row:any) {
// 过滤手动触发的select事件，返回的row是否再selection中。
const result = selection.filter((item:any) => item.id === row.id)
if (result.length > 0) {
this.setChecked()
} else {
// 取消逻辑
this.$confirm('确定取消此选择么？', '提示', {
confirmButtonText: '关闭',
cancelButtonText: '确定取消',
type: 'warning'
}).then(() => {
// 点击确定，或者就是点击confirmButtonText这里文案时触发
const selectResult = [...selection, row]
this.selectDatas = selectResult
this.setChecked()
}).catch(() => {
this.selectDatas = selection
this.setChecked()
})
}
}
private setChecked() {
this.$nextTick(() => {
this.selectDatas.forEach((ele:any) => {
if (this.$refs.someTable) {
(this.$refs.someTable as any).toggleRowSelection(ele, true)
}
})
})
}
基础版这样就可以了，但是遇到一个问题，就是最后一条取消的时候，会存在问题。所以增加一个@selection-change来处理
private selectChange(selection:any) {
//最大可选择数量
if (selection.length > this.maxSize) {
//数组.slice 截取 可以设置的部分
this.selectDatas = selection.slice(0, this.maxSize)
this.setChecked()
// 如果有超出最大长度的部分，就提示
const temp = selection.slice(this.maxSize)
if (temp.length > 0) {
this.$message({
message: `可选择数量不可超过${this.maxSize}个`,
type: 'warning'
})
temp.forEach((ele:any) => {
if (this.$refs.someTable) {
//本来不想把ts用成anyscript的，但是刚学，不熟。只能简单粗暴了
(this.$refs.someTable as any).toggleRowSelection(ele, false)
}
})
}
} else if (selection.length > 0 && selection.length <= this.maxSize) {
this.selectDatas = selection
this.setChecked()
} else {
// 全不选时 逻辑
this.$confirm('确定取消全部选择么？', '提示', {
confirmButtonText: '关闭',
cancelButtonText: '确定取消',
type: 'warning'
}).then(() => {
this.setChecked()
}).catch(() => {
this.selectDatas = selection
if (this.$refs.someTable) {
//清楚全部选项
(this.$refs.someTable as any).clearSelection()
}
})
}
}
完整代码
import {ajaxFucktion} from '@/xxx/xxx'
export default class extends Vue{
// 如果是mixin，写成 export default class extends Mixins(yourMixin)
private someData = []
private loadingStatus = false
private async mounted(){
await this.getData()
}
private async getData(){
try{
this.loadingStatus = true
const {resData} = ajaxFucktion
//如果需要设置默认选中
const defaultCheckenList = (this.$route.query.checkedList as string).split(',').map(Number)
//我这边逻辑是从route的query里取参数，query里传过来的list是2,3,4这种，所以处理成数组
const result = resData.filter((item:any)=>{
return defaultCheckenList.some((val:any)=>{
return val === item.id
})
})
this.selectDatas = result
this.setChecked()
}catch(e){
this.$message.error(e && e.msg)
}finally{
this.loadingStatus = false
}
}
private selectHandle(selection:any, row:any) {
// 过滤手动触发的select事件，返回的row是否再selection中。
const result = selection.filter((item:any) => item.id === row.id)
if (result.length > 0) {
this.setChecked()
} else {
// 取消逻辑
this.$confirm('确定取消此选择么？', '提示', {
confirmButtonText: '关闭',
cancelButtonText: '确定取消',
type: 'warning'
}).then(() => {
// 点击确定，或者就是点击confirmButtonText这里文案时触发
const selectResult = [...selection, row]
this.selectDatas = selectResult
this.setChecked()
}).catch(() => {
this.selectDatas = selection
this.setChecked()
})
}
}
private setChecked() {
this.$nextTick(() => {
this.selectDatas.forEach((ele:any) => {
if (this.$refs.someTable) {
(this.$refs.someTable as any).toggleRowSelection(ele, true)
}
})
})
}
private selectChange(selection:any) {
if (selection.length > this.maxSize) {
this.selectDatas = selection.slice(0, this.maxSize)
this.setChecked()
const temp = selection.slice(this.maxSize)
if (temp.length > 0) {
this.$message({
message: `可配置数量不可超过${this.maxSize}个`,
type: 'warning'
})
temp.forEach((ele:any) => {
if (this.$refs.someTable) {
//本来不想把ts用成anyscript的，但是刚学，不熟。只能简单粗暴了
(this.$refs.someTable as any).toggleRowSelection(ele, false)
}
})
}
} else if (selection.length > 0 && selection.length <= this.maxSize) {
this.selectDatas = selection
this.setChecked()
} else {
// 全不选时 逻辑
this.$confirm('确定取消全部选择么？', '提示', {
confirmButtonText: '关闭',
cancelButtonText: '确定取消',
type: 'warning'
}).then(() => {
this.setChecked()
}).catch(() => {
this.selectDatas = selection
if (this.$refs.someTable) {
(this.$refs.someTable as any).clearSelection()
}
})
}
}
}
打完收工
方法可能不是很好，但是解决了我的问题。。。
整理一下用到的小玩意儿
//把数字字符串转换成数字数组
'2,3,4,5'.split(',').map(Number)
// 从数组arr1和arr2中找出相同 === 或者不相同 !== 的对象 并返回新数组
const result = arr1.filter(item=>{
return arr2.some(val=>{
return item.xx === val.xx
})
})
//element中设置 el-table的checkbox选中与不选中状态
this.$refs.someTable.toggleRowSelection(data,true/false)
