本篇文章為大家展示了使用el-select怎么實(shí)現(xiàn)全選下拉框多選，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),新河企業(yè)網(wǎng)站建設(shè),新河品牌網(wǎng)站建設(shè),網(wǎng)站定制,新河網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,新河網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

方法一：下拉項(xiàng)增加一個(gè)【全選】，然后應(yīng)該有以下幾種情況：

1. 下拉選項(xiàng)全都勾選時(shí)，【全選】自動(dòng)勾選；

2. 下拉選項(xiàng)部分勾選時(shí)，點(diǎn)擊【全選】后，所有下拉項(xiàng)全部勾選；

3. 下拉選項(xiàng)全都未勾選時(shí)，點(diǎn)擊【全選】后，所有下拉選項(xiàng)不勾選；

4. 下拉選項(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;
 }

上述內(nèi)容就是使用el-select怎么實(shí)現(xiàn)全選下拉框多選，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。