在 Element 中，Select 組件支持單選和多選，但是并沒有全選的屬性，因此只能通過其事件和屬性來實現(xiàn)，本文將實現(xiàn)一個簡單的示例。

〇、前言

在 Element 中，Select 組件支持單選和多選，但是并沒有全選的屬性，因此只能通過其事件和屬性來實現(xiàn)，本文將實現(xiàn)兩個簡單的示例。

注意：本文的示例中，通過 leixing1 來兼容多控件共享同一方法。

一、兩種實現(xiàn)

1.1 通過添加一個 Checkbox 來操作全選（推薦）

• 大致思路

在全部選項最上邊添加一個 Checkbox 復(fù)選框，勾選時自動全選，取消勾選自動取消全部已選中項。

再給 Select 添加一個 Change 事件方法，當(dāng)選中項等于備選列表長度，則自動勾選 Checkbox，否則取消勾選。

• 實現(xiàn)效果

 

• 前端實現(xiàn)代碼

<el-select 
  class="select-item uniform-width"
  v-model="formData.leixing1"
  filterable multiple 
  clearable @change="changeSelect($event,'leixing1')"
  placeholder="全部類型（多選）"
>
  <el-checkbox :indeterminate="isIndeterminate_lx" v-model="checked" @change="selectAll('leixing1')" style="padding:5px 0 10px 20px;">全選</el-checkbox>
  <el-option
    v-for="item in leixing1OptionsList"
    :label="item.mingcheng"
    :value="item.bianma"
    :key="item.bianma"
  />
</el-select>

• js 代碼實現(xiàn)

<script>
export default {
  name: "Example",
  data() {
    return {
      isIndeterminate:false,
      isIndeterminate_lx1:false,
      isIndeterminate_lx2:false,
      checked:false,
      checked_lx1:false,
      checked_lx2:false,
      formData:[],
      leixing1OptionsList:[
        {mingcheng:"第1項",bianma:"1"},
        {mingcheng:"第2項",bianma:"2"},
        {mingcheng:"第3項",bianma:"3"},
      ],
      leixing2OptionsList:[],
    };
  },
  methods: {
    changeSelect(val,leixing) {
      let list=[]
      let value=""
      switch (leixing){ // 根據(jù)不同的組件對取值進(jìn)行區(qū)分
        case "leixing1":
          list=this.leixing1OptionsList
          this.checked=this.checked_lx1
          break
        case "leixing2":
          list=this.leixing2OptionsList
          this.checked=this.checked_lx2
          break
      }
      if (this.formData[leixing].length==list.length) { // 全選
        this.checked=true
        this.isIndeterminate=false
      } else if (this.formData[leixing].length!=list.length && this.formData[leixing].length>0) {
        this.checked=false
        this.isIndeterminate=true
      }else if(this.formData[leixing].length==0){
        this.isIndeterminate=false
      }
      switch (leixing){
        case "leixing1":
          this.checked_lx1=this.checked
          this.isIndeterminate_lx1=this.isIndeterminate
          break
        case "leixing2":
          this.checked_lx2=this.checked
          this.isIndeterminate_lx2=this.isIndeterminate
          break
      }
    },
    selectAll(leixing) {
      let list=[]
      let value=""
      switch (leixing){ // 根據(jù)不同的組件對取值進(jìn)行區(qū)分
        case "leixing1":
          list=this.leixing1OptionsList
          this.checked=this.checked_lx1
          this.isIndeterminate_lx1=false
          value="bianma"  // 具體的取值屬性配置
          break
        case "leixing2":
          list=this.leixing2OptionsList
          this.checked=this.checked_lx2
          this.isIndeterminate_lx2=false
          value="key"  // 具體的取值屬性配置
          break
      }
      if (this.checked) { // 全選
        list.map((item) => {
          if(!this.formData[leixing].includes(item[value])) // 判斷是否已存在
            this.formData[leixing].push(item[value])
        })
      } else { // 取消全選
        this.formData[leixing] = [];
      }
    },
  },
};
</script>

1.2 通過增加一個 Option 選項‘全選’來實現(xiàn)

• 大致思路

手動增加 Select 的第一個選項‘全選’，通過這個選項的事件，來操作是否全選。

再通過列表的長度和已選中的選項進(jìn)行比較，相等就自動勾選‘全選’，否則就取消勾選。

注意：Select 組件的值會包含‘全選’這個值，需要在后端進(jìn)行過濾。

• 實現(xiàn)效果

• 前端控件代碼

<el-select 
  class="select-item uniform-width"
  v-model="formData.leixing1"
  filterable multiple 
  clearable @change="changeSelect($event,'leixing1')"
  placeholder="全部類型（多選）"
>
  <el-option label='全選' value='全選' @click.native="selectAll('leixing1')" v-if="leixing1OptionsList.length"></el-option>
  <el-option
    v-for="item in leixing1OptionsList"
    :label="item.mingcheng"
    :value="item.bianma"
    :key="item.bianma"
  />
</el-select>

• js 代碼實現(xiàn)及解釋

<script>
export default {
  name: "Example",
  data() {
    return {
      formData:[],
      leixing1OptionsList:[
        {mingcheng:"第1項",bianma:"1"},
        {mingcheng:"第2項",bianma:"2"},
        {mingcheng:"第3項",bianma:"3"},
      ],
      leixing2OptionsList:[],
    };
  },
  methods: {
    changeSelect(val,leixing) {
      let list=[]
      let value=""
      switch (leixing){ // 根據(jù)不同的組件對取值進(jìn)行區(qū)分
        case "leixing1":
          list=this.leixing1OptionsList
          break
        case "leixing2":
          list=this.leixing2OptionsList
          break
      }
      if (!val.includes('全選') && val.length === list.length) { // 手動選擇全部選項后，自動選中‘全選’
        this.formData[leixing].unshift('全選')
      } else if (val.includes('全選') && (val.length - 1) < list.length) { // 取消選中任一項，同時取消‘全選’
        this.formData[leixing] = this.formData[leixing].filter((item) => { return item !== '全選'})
      }
    },
    selectAll(leixing) {
      let list=[]
      let value=""
      switch (leixing){ // 根據(jù)不同的組件對取值進(jìn)行區(qū)分
        case "leixing1":
          list=this.leixing1OptionsList
          value="bianma"  // 具體的取值屬性配置
          break
        case "leixing2":
          list=this.leixing2OptionsList
          value="key"  // 具體的取值屬性配置
          break
      }
      if (this.formData[leixing]!=undefined && this.formData[leixing].length < list.length) { // 全選
        this.formData[leixing] = ['全選'] // 默認(rèn)選中‘全選’這一項
        list.map((item) => { // 將全部選項加入值列表
          if(!this.formData[leixing].includes(item[value])) // 判斷是否已存在
            this.formData[leixing].push(item[value])
        })
      } else { // 取消全選
        this.formData[leixing] = [];
      }
    },
  },
};
</script>