el-select 下拉框全選、多選的幾種方式組件示例詳解

更新時間：2023年12月22日 10:01:43 作者：奮斗吧程序媛

這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

組件一、基礎(chǔ)多選

適用性較廣的基礎(chǔ)多選，用 Tag 展示已選項(xiàng)

<template>
  <el-select v-model="value1" multiple placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value1: []
      }
    }
  }
</script>

為el-select設(shè)置multiple屬性即可啟用多選，此時v-model的值為當(dāng)前選中值所組成的數(shù)組。默認(rèn)情況下選中值會以 Tag 的形式展現(xiàn)，你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。

<template>
  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value2: []
      }
    }
  }
</script>

組件二、el-select 下拉框多選實(shí)現(xiàn)全選

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

下拉選項(xiàng)全都勾選時，【全選】自動勾選；
下拉選項(xiàng)部分勾選時，點(diǎn)擊【全選】后，所有下拉項(xiàng)全部勾選；
下拉選項(xiàng)全都未勾選時，點(diǎn)擊【全選】后，所有下拉選項(xiàng)不勾選；
下拉選項(xiàng)和【全選】都選上的時候，不勾選任意下拉選項(xiàng)，【全選】按鈕就不勾選了
效果圖一、

上代碼：

<template>
    <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='請選擇'>
        <el-option label='全選' value='全選' @click.native='selectAll'></el-option>
        <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
     </el-select>
</template>
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 = []
      }
    }
  }
}

效果圖二、

代碼：
直接添加一個【全選】復(fù)選框，實(shí)現(xiàn)的功能跟方法一是一樣的

<template>
  <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='請選擇'>
    <el-checkbox v-model="checked" @change='selectAll'>全選</el-checkbox>
    <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
  </el-select>
</template>
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
      }
    }
  }
}

.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
 }

效果圖三、

下拉框和全選都加上 checkbox，選擇框 el-select 全選多選， el-option與el-checkbox的組合使用

需要注意的事項(xiàng)：

1. el-select與el-checkbox-group的v-model 綁定的值，需相同，綁定同一個變量
2. el-option的value與el-checkbox的label綁定的值也需要相同
3. el-checkbox 需要使用 style=“pointer-events: none”，是為了去掉鼠標(biāo)事件，阻止事件冒泡，觸發(fā)了兩次el-select的change事件

代碼如下:

 <el-select
                v-model="lineNumStage"
                v-bind="$attrs"
                multiple
                style="width: 100%;"
                placeholder="請選擇線路"
                @change="handleSelect"
              >
                <div style="padding: 0 20px; line-height:34px">
                  <el-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全選</el-checkbox>
                </div>
                <el-checkbox-group v-model="lineNumStage">
                  <el-option v-for="item in checkedLineArry" :key="item.value" :label="item.name" :value="item.value">
                    <el-checkbox style="pointer-events: none" :label="item.value">
                      {{ item.label }}
                    </el-checkbox>
                  </el-option>
                </el-checkbox-group>
              </el-select>

checkAll: false, // 是否全選
isIndeterminate: false, //全選復(fù)選框標(biāo)識        
options: [
    { name: '京廣高速', value: '京廣高速' },
    { name: '京包客專', value: '京包客專' },
    { name: '京哈高速', value: '京哈高速' },
    { name: '崇禮線',   value: '崇禮線' },
    { name: '京秦高鐵', value: '京秦高鐵' },
    { name: '京滬高鐵', value: '京滬高鐵' },
    { name: '京津城際', value: '京津城際' },
],
biddingStage: [],
// 下拉框選擇事件
handleSelect(value) {
    const checkedCount = value.length;
    this.checkAll = checkedCount === this.options.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
},
// 全選事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    this.biddingStage = val ? data : [];
    this.isIndeterminate = false;
},

注: 如果需要把右邊的√去掉，el-select加上class和popper-append-to-body=false屬性，然后css修改

 /deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
   	display: none;
}

效果圖四、全選全部選中的時候，下拉框的文字是全選，后面是 + 12 數(shù)量

思路：
由于添加了：collapse-tags 屬性后，全選選中的時候，正常會默認(rèn)選中第一個label的值顯示，后面是 + 全部數(shù)量 -1 . 我們可以在初始化的時候，把默認(rèn)選中的數(shù)組里面最前面添加一項(xiàng)“全選”

// 初始化給下拉框選中 的數(shù)組賦值
this.biddingStage = [ '京廣高速','京包客專', '京哈高速','崇禮線','京滬高鐵','京津城際']
this.biddingStage.unshift('全選')

然后在全選的方法里面：判斷如果是全選就在最前面添加1項(xiàng) value 值 ‘全選’

// 全選事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    // this.biddingStage = val ? data : [];
     if (val) {
        this.biddingStage = data
        this.biddingStage .unshift('全選')
      } else {
        this.biddingStage  = []
      }
    this.isIndeterminate = false;
},

然后在下拉框選項(xiàng)改變的時候:

1. 先用arr1的變量存一下，把下拉框的數(shù)組過濾出不含全選的，剩余全部數(shù)據(jù)

2. 用selectArr的變量存一下， value的數(shù)組過濾出不含全選的，剩余全部數(shù)據(jù)

然后用新的2個變量去執(zhí)行

      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length

最后在判斷 this.isCheckAll 是否是 true 是的話，就是全選。在數(shù)組最前面添加 1項(xiàng) value ’全選‘
否則就移除 ’全選‘

      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全選')
      } else {
        this.biddingStage = this.biddingStage.filter((item) => {
          return item !== '全選'
        })
        console.log(this.biddingStage)
      }

這部分全部代碼如下:

    // 線路下拉框選擇事件
    handleSelect(value) {
      console.log('value:', value)
      const arr1 = this.options.filter((item) => {
        return item !== '全選'
      })
      const selectArr = value.filter((item) => {
        return item !== '全選'
      })
      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length
      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全選')
      } else {
        this.biddingStage= this.biddingStage.filter((item) => {
          return item !== '全選'
        })
        console.log(this.biddingStage)
      }
    },

到此這篇關(guān)于el-select 下拉框全選、多選的幾種方式組件的文章就介紹到這了,更多相關(guān)el-select 下拉框全選、多選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: