快捷導(dǎo)航

Vue中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能(思路詳解)

更新時(shí)間：2024年02月06日 11:35:55 作者：小熊貓Yzt_199626

在開(kāi)發(fā)中,有一個(gè)需求是選項(xiàng)組件中使用到一個(gè) 全選的功能,特在這記錄下實(shí)現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對(duì)vue ElementUi 全選功能感興趣的朋友一起看看吧

前言:在開(kāi)發(fā)中，有一個(gè)需求是選項(xiàng)組件中使用到一個(gè) 全選的功能，特在這記錄下實(shí)現(xiàn)的方法，方便后續(xù)的查閱，以及方便大家查閱借鑒。若是有更好的方法，請(qǐng)大家傳授傳授。

效果圖：

思路：就圍繞是 ‘全選’ 還是單選展開(kāi)，用布爾字段 selectAll 來(lái)標(biāo)識(shí)，selectAll 默認(rèn)是 false 非全選。

全選分支：只有全選和取消權(quán)限操作。

單選分支：判斷下選擇到數(shù)組長(zhǎng)度是否與所有選項(xiàng)長(zhǎng)度一樣，是的話(huà)就說(shuō)明是全選。否則就是單選。

直接上簡(jiǎn)單的 demo：

<template>
  <div>
    <el-form ref="searchform" label-width="150px">
      <el-form-item label="select多選demo:">
        <el-select
          v-model="selectValue"
          @change="changeSelect"
          multiple
          clearable
          placeholder="請(qǐng)選擇"
        >
          <el-option key="selectAll" label="全部" value="selectAll"></el-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</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: '北京烤鴨'
        }
      ],
      selectValue: [],
      selectAll: false // 用于標(biāo)識(shí)是否全選--默認(rèn)不全選
    }
  },
  created() {
    console.log(...this.options)
    console.log(this.options.filter(p => p.value != 'selectAll'))
  },
  methods: {
    changeSelect(value) {
      //  selectAll 為true 的時(shí)候，就走全選分支，全選后出現(xiàn)的情況就是取消權(quán)限
      if (this.selectAll) {
        this.selectAll = false
        if (value.indexOf('selectAll') > -1) {
          this.selectValue = value.filter(p => p != 'selectAll')
        } else {
          this.selectValue = []
        }
      } else {
        //   是否點(diǎn)擊了‘全選'選項(xiàng)
        if (value.indexOf('selectAll') > -1) {
          // 有‘全選'選項(xiàng)，則將‘全部'和其他值放置一塊
          const optionsValue = []
          this.options.forEach(item => {
            optionsValue.push(item.value)
          })
          this.selectValue = ['selectAll', ...optionsValue]
          this.selectAll = true
        } else {
          // 若是勾選選擇的長(zhǎng)度和提供的選項(xiàng)長(zhǎng)度是一樣的，則是 ‘全選'
          if (value.length === this.options.length) {
            const optionsValue = []
            this.options.forEach(item => {
              optionsValue.push(item.value)
            })
            this.selectValue = ['selectAll', ...optionsValue]
            this.selectAll = true
          } else {
            //   都是單選
            this.selectValue = value
          }
        }
      }
      // 真實(shí)的勾選值
      const realSelect = this.selectValue.filter(item => item != 'selectAll')
      console.log('realSelect', realSelect)
    }
  }
}
</script>
<style lang="scss" scoped></style>

這次的例子比較簡(jiǎn)單，希望對(duì)您有幫助，謝謝支持。

到此這篇關(guān)于VUE中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能的文章就介紹到這了,更多相關(guān)vue ElementUi 全選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: