需求是:
可多選需滿足條件:同一個年級、同一個分?jǐn)?shù);
不滿足條件給出提示:請選擇同一個年級 、分?jǐn)?shù)的學(xué)生
1、先對勾選數(shù)據(jù)進(jìn)行賦值
/** 表格復(fù)選框勾選 */
handleSelectionChange(val) {
console.log(val)
this.tableSelectArr = val
},
2、判斷是否相同的內(nèi)容 的公共方法,tableSelectArr是勾選的數(shù)據(jù)集合文章來源:http://www.zghlxwxcb.cn/news/detail-562656.html
/** 判斷是否是相同內(nèi)容 */
isEqualMethod(name) {
// 返回一個id的數(shù)組
const newArr = this.tableSelectArr.map(item => item[name])
// Set類似于數(shù)組,區(qū)別在于它所有的成員都是唯一的,不能有重復(fù)的值,會將重復(fù)的值去重
const arrSet = new Set(newArr)
console.log(newArr, arrSet, 'arrSet', arrSet.size)
// 判斷set之后的數(shù)組的長度跟set之前的數(shù)組是否相等
if (arrSet.size === 1) {
return name
} else {
return false
}
},
3、按鈕位置增加判斷、攔截文章來源地址http://www.zghlxwxcb.cn/news/detail-562656.html
// 按鈕
handleSomething() {
// 同一個年級、分?jǐn)?shù)
const supplier = this.isEqualMethod('grade') // 方法傳參是表格數(shù)據(jù)中對應(yīng)的字段
const unit = this.isEqualMethod('score')
if (supplier && unit) {
// 繼續(xù)后面邏輯
} else {
this.$message.warning('請選擇同一個年級 、分?jǐn)?shù)的學(xué)生')
}
},
到了這里,關(guān)于elementUI表格勾選框判斷選擇相同的內(nèi)容才能進(jìn)行后續(xù)邏輯處理;否則攔截提示的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!