資訊專欄INFORMATION COLUMN
摘要：還是看代碼吧。。。部分請(qǐng)選擇全選全選部分一一二二三三四四五五全選全選全選全選全選全選看看效果圖方法二直接添加一個(gè)全選復(fù)選框，實(shí)現(xiàn)的功能跟方法一是一樣的部分請(qǐng)選擇全選部分一一二二三三四四五五效果圖
在寫一個(gè)功能時(shí)發(fā)現(xiàn)el-select支持多選，但是竟然不支持全選，好無語哦，那就自己實(shí)現(xiàn)一下吧~有兩種方法，第二種感覺簡(jiǎn)單些
方法一：下拉項(xiàng)增加一個(gè)【全選】，然后應(yīng)該有以下幾種情況：
下拉選項(xiàng)全都勾選時(shí)，【全選】自動(dòng)勾選；
下拉選項(xiàng)部分勾選時(shí)，點(diǎn)擊【全選】后，所有下拉項(xiàng)全部勾選；
下拉選項(xiàng)全都未勾選時(shí)，點(diǎn)擊【全選】后，所有下拉選項(xiàng)不勾選；
下拉選項(xiàng)和【全選】都選上的時(shí)候，不勾選任意下拉選項(xiàng)，【全選】按鈕就不勾選了；
上面就是我要實(shí)現(xiàn)的功能，我好啰嗦。。。還是看代碼吧。。。
html部分：
js部分：
export default {
data() {
return {
selectedArray: [],
options: [
{ name: "一一", label: "one" },
{ name: "二二", label: "tow" },
{ name: "三三", label: "three" },
{ name: "四四", label: "four" },
{ name: "五五", label: "five" }
]
}
},
methods: {
selectAll() {
if (this.selectedArray.length < this.options.length) {
this.selectedArray = []
this.options.map((item) => {
this.selectedArray.push(item.name)
})
this.selectedArray.unshift("全選")
} else {
this.selectedArray = []
}
},
changeSelect(val) {
if (!val.includes("全選") && val.length === this.options.length) {
this.selectedArray.unshift("全選")
} else if (val.includes("全選") && (val.length - 1) < this.options.length) {
this.selectedArray = this.selectedArray.filter((item) => {
return item !== "全選"
})
}
},
removeTag(val) {
if (val === "全選") {
this.selectedArray = []
}
}
}
}
看看效果圖：
方法二：直接添加一個(gè)【全選】復(fù)選框，實(shí)現(xiàn)的功能跟方法一是一樣的
html部分：
全選
js部分：
export default {
data() {
return {
checked: false,
selectedArray: [],
options: [
{ name: "一一", label: "one" },
{ name: "二二", label: "tow" },
{ name: "三三", label: "three" },
{ name: "四四", label: "four" },
{ name: "五五", label: "five" }
]
}
},
methods: {
selectAll() {
this.selectedArray = []
if (this.checked) {
this.options.map((item) => {
this.selectedArray.push(item.name)
})
} else {
this.selectedArray = []
}
},
changeSelect(val) {
if (val.length === this.options.length) {
this.checked = true
} else {
this.checked = false
}
}
}
}
css：
.el-checkbox {
text-align: right;
width: 100%;
padding-right: 10px;
}
效果圖：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106292.html
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：一日期時(shí)間相關(guān)組件改版月初對(duì)日期時(shí)間相關(guān)組件交互上進(jìn)行了一波大更新，主要是為了減少用戶的操作成本，減少展示占用面積。單日期范圍選擇器中選擇日期后，自動(dòng)跳轉(zhuǎn)至下一個(gè)框進(jìn)行選擇，都選擇完成后自動(dòng)確認(rèn)。單日期范圍選擇器中使用雙面板展示。一、日期時(shí)間相關(guān)組件改版（DatePicker、TimePicker）6 月初對(duì)日期時(shí)間相關(guān)組件DatePicker、TimePicker交互上進(jìn)行了一波大更新，主...
摘要：數(shù)據(jù)過多處理方式在日常項(xiàng)目中組件的使用頻率是非常之高的當(dāng)數(shù)據(jù)過多時(shí)渲染時(shí)間非常長(zhǎng)這里提供幾個(gè)處理方式遠(yuǎn)程搜索組件提供了遠(yuǎn)程搜索方式也就是按照你輸入的結(jié)果匹配選項(xiàng)官網(wǎng)提供了參考示例這里不加贅述下拉懶加載下拉懶加載當(dāng)滾動(dòng)到底部時(shí)你再去請(qǐng)求一 el-select數(shù)據(jù)過多處理方式 在日常項(xiàng)目中el-select組件的使用頻率是非常之高的. 當(dāng)數(shù)據(jù)過多時(shí)渲染時(shí)間非常長(zhǎng), 這里提供幾個(gè)處理方式. ...
閱讀 1380·2021-09-22 15:09
閱讀 2734·2021-08-20 09:38
閱讀 2465·2021-08-03 14:03
閱讀 922·2019-08-30 15:55
閱讀 3397·2019-08-30 12:59
閱讀 3579·2019-08-26 13:48
閱讀 1916·2019-08-26 11:40
閱讀 709·2019-08-26 10:30
