2. 程式人生 > 程式設計 >elementUI實現下拉選項加多選框的示例程式碼

elementUI實現下拉選項加多選框的示例程式碼

阿新 • • 發佈：2021-10-18
目錄
  • 下拉加多選框
  • 升級—新增全部選項
  • 需求改版完善

因產品需求和UI樣式調整，和element自帶的下拉多選有衝突，索性自己嘗試修改如下：

下拉加多選框

效果如下圖：

在這裡插入圖片描述

封裝如下：

<template>
  <div class="select-checked">
    <!-- 下拉加多選框 -->
    <el-select
      v-model="value"
      multiple
      placeholder="請選擇"
      :popper-append-to-body="false"
      @remove-tag="removeTag"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <el-checkbox v-model="item.check" @change="isChecked(item)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
    </el-select>
    {{ value }}
  </div>
</template>

<script>
export default {
  name: 'SelectChecked',components: {},props: {
    options:{
      type: Array
    }
  },data() {
    return {
      value: []
    }
  },methods: {
    // 多選框觸發
    isChecked(item) {
      if (item.check && this.value.indexOf(item.value) == -1) {
        this.value.push(item.value)
      } else if (!item.check) {
        this.value.forEach((elm,idx) => {
          if (elm == item.value) {
            this.value.splice(idx,1)
          }
        })
      }
      this.$emit('selectedVal',this.value)
    },// 多選模式下移除tag時觸發
    removeTag(value) {
      this.options.forEach((elm,idx) => {
        if (elm.value == value) {
          elm.check = false
        }
      })
      this.$emit('selectedVal',this.value)
    }
  }
}
</script>

<style lang="s">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 30px;
    .el-checkbox__label {
      margin-left: 20px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
}
</style>

頁面中使用

<!--  -->
<template>
  <div class="content-box">
    <div class="container">
      <SelectChecked :options="options" @selectedVal="selectedVal" />
    </div>
  </div>
</template>

<script>
import SelectChecked from '@/components/Select/SelectChecked'
export default {
  name: 'record',components: {
    SelectChecked
  },data() {
    return {
  	  options: [
        {
          value: '001',label: '黃金糕',check: false
        },{
          value: '002',label: '雙皮奶',{
          value: '003',label: '蚵仔煎',{
          value: '004',label: '龍鬚麵',{
          value: '005',label: '北京烤鴨',check: false
        }
      ],}
  },watch: { },computed: {},methods: {
    selectedVal(value){
      console.log(111,value); // 獲取子元件選項的值
    }
  },
 

  created() {
    console.log('created-record')
  },activated() {
    console.log('created-record')
  },mounted() {}
}
</script>

<style lang="scss">
</style>

在這裡插入圖片描述

升級—新增全部選項

<template>
  <div class="select-checked">
    <!-- 下拉加多選框 -->
    <el-select
      v-model="value"
      multiple
      placeholder="請選擇"
      :popper-append-to-body="false"
      @remove-tag="removeTag"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <el-checkbox v-model="item.check" @change="isCheck(item)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
    </el-select>
    {{ value }}
  </div>
</template>

<script>
export default {
  name: 'SelectChecked',props: {
    options: {
      type: Array
    }
  },methods: {
    // 多選框觸發
    isCheck(item) {
      if (item.check && item.value == 'all') {
        this.value = []
        this.options.forEach(element => {
          element.check = true
          this.value.push(element.value)
        })
      } else if (!item.check && item.value == 'all') {
        this.value = []
        this.options.forEach(element => {
          element.check = false
        })
      }
      if (
        item.check &&
        this.value.indexOf(item.value) == -1 &&
        item.value !== 'all'
      ) {
        this.value.forEach((elm,idx) => {
          if (elm == 'all') {
            this.value.splice(idx,1)
          }
       客棧
 
 })
        this.value.push(item.value)
        if (this.value.length == this.options.length - 1) {
          this.options[0].check = true
          this.value.unshift('all')
        } else {
          this.options[0].check = false
        }
      } else if (!item.check && item.value !== 'all') {
        this.options[0].check = false
        this.value.forEach((elm,idx) => {
          if (elm == item.value || elm == 'all') {
            this.value.splice(idx,// 多選模式下移除tag時觸發
    removeTag(valueaitjjvGNQt) {
      if (value == 'all') {
        this.options.forEach((elm,idx) => {
          elm.check = false
        })
        this.value = []
      } else {
        this.options.forEach((elm,idx) => {
          if (elm.value == value || elm.value == 'all') {
            elm.check = false
          }
        })
      }
      this.$emit('selectedVal',this.value)
    }
  }
}
</script>

<style lang="scss">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 30px;
    .el-checkbox__label {
      margin-left: 20px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
}
</style>

元件中使用

<!--  -->
<template>
  <div class="content-box select-checked">
    <div class="container">
      <SelectChecked :options="options" @selectedVal="selectedVal" />
    </div>
  </div>
</template>

<script>
import SelectChecked from '@/components/Select/SelectChecked'
export default {
  name: 'record',data() {
    return {
      options: [
        {
          value: 'all',label: '全部',{
          value: '001',value1: []
    }
  },watch: {
   
    }
  },methods: {
    selectedVal(value){
      // 注意這裡如果有全部的話，要去掉全部
      value.forEach((item,idx )=>{
        if(item == 'all'){
          value.splice(idx,1)
        }
      })
      console.log(111,value);
    }
  },created() {
    console.log('created-record')
  },mounted() {}
}
</script>

<style lang="scss">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 30px;
    .el-checkbox__label {
      margin-left: 20px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
}
</style>

效果如下圖

在這裡插入圖片描述

在這裡插入圖片描述

需求改版完善

感謝龍哥指導和幫忙

<template>
  <div class="select-checked">
    <el-select
      :value="selected"
      multiple
      placeholder="請選擇"
      :popper-append-to-body="false"
    >
      <el-option :value="''" label="全部" class="multiple">
        <el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
          全部
        </el-checkbox>
      </el-option>
      <el-option
        class="multiple"
        :value="key"
        :label="item"
        v-for="(item,key) in optionsData"
        :key="key"
      >
        <el-checkbox
          :value="selectedOptions.includes(key)"
          @change="handleTaskItemChange(key)"
        >
          {{ item }}
        </el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select',props: {
    options: {
      type: Object
    }
  },data() {
    return {
      optionsData: {},optionsAll: true,selectedOptions: [],watch: {
    options: {
      handler(newVal) {
        console.log(newVal)
        this.optionsData = newVal
        this.selectedOptions = Object.keys(newVal) 
      },immediate: true,// 該值預設是false，在進入頁面時，第一次繫結值，不會立刻執行監聽，只有資料發生改變才會執行handler中的操作
      // deep: true,// deep 深度
    },},computed: {
    selected() {
      if (
        this.selectedOptions.length === Object.keys(this.optionsData).length
      ) {
        return ['']
      } else {
        return this.selectedOptions
      }
    }
  },methods: {
    handleoptionsAllChange(isAll) {
      if (isAll) {
        this.selectedOptions = Object.keys(this.optionsData)
      } else {
        this.selectedOptions = []
      }
    },handleTaskItemChange(key) {
      if (this.selectedOptions.includes(key)) {
        this.selectedOptions.splice(this.selectedOptions.indexOf(key),1)
      } else {
        this.selectedOptions.push(key)
      }
      this.optionsAll =
        this.selectedOptions.length === Object.keys(this.optionsData).length
    }
  }
}
</script>

<style lang="scss">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 30px;
    .el-checkbox__label {
      margin-left: 20px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
  .el-tag__close,.el-icon-close {
    display: none;
  }
  .el-tag.el-tag--info {
    background: transparent;
    border: 0;
  }

  .el-select {
    .el-select__tags {
      flex-wrap: nowrap;
      overflow: hidden;
    }
    .el-tag {
      background-color: #fff;
      border: none;
      color: #606266;
      font-size: 13px;
      padding-right: 0;
      & ~ .el-tag {
        margin-left: 0;
      }
      &:not(:last-child)::after {
        content: ',';
      }
    }
  }
}
</style>

元件使用：

<!--  -->
<template>
  <div class="content-box select-checked">
    <div class="container">
      <Select :options="optionsData" @selected="selected" />
    </div>
  </div>
</template>

<script>
import Select from '@/components/Select/Select'

export default {
  name: 'record',components: {
    Select
  },data() {
    return {
      optionsData: {
        '001': '黃金糕','002': '雙皮奶','003': '蚵仔煎','004': '龍鬚麵','005': '北京烤鴨'
      },watch: {},methods: {
	selected(value){
      console.log(value);
      let str = value.join()
      console.log(str)
      // 注意選項為全部時資料裡面的值為空字串和無的情況
      if(value.includes('') || value.length === 0){
        console.log(Object.keys(this.optionsData).join());
      }
    }
  },mounted() {}
}
</script>


<style lang="scss" scoped>

</style>

效果如下：

在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述

因上面是物件格式資料，操作起來可能會不方便，我重新整理了一下陣列物件格式資料，如下

<template>
  <div class="select-checked">
    <el-select
      :value="selected"
      :class="{ all: optionsAll }"
      multiple
      placeholder="請選擇"
      :popper-append-to-body="false"
    >
      <el-option :value="''" label="全部" class="multiple">
        <el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
          全部
        </el-checkbox>
      </el-option>
      <el-option
        class="multiple"
        :value="item.value"
        :label="item.label"
        v-for="(item,key) in optionsData"
        :key="key"
      >
        <el-checkbox v-model="item.check" @change="handleTaskItemChange(item)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select',data() {
    return {
      optionsData: [],selectedOptions: []
    }
  },watch: {
    options: {
      handler(newVal) {
        this.optionsData = newVal
        newVal.forEach(item => {
          if (item.check) {
            this.selectedOptions.push(item.value)
          }
        })
      },immediate: true
      // deep: true,// 深度監聽
    }
  },computed: {
    selected() {
      if (this.selectedOptions.length === this.options.length) {
        return ['']
      } else {
        return this.selectedOptions
      }
    }
  },methods: {
    handleoptionsAllChange(isAll) {
      if (isAll) {
    www.cppcns.com    this.optionsData.forEach((elm,idx) => {
          elm.check = true
          this.selectedOptions.push(elm.value)
        })
      } else {
        this.optionsData.forEach((elm,idx) => {
          elm.check = false
        })
        this.selectedOptions = []
      }
      this.$emit('selected',this.selectedOptions)
    },handleTaskItemChange(item) {
      // console.log(item)
      // 這裡是取出下標的方法，可以封裝寫出去
      Array.prototype.getArrayIndex = function (obj) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === obj) {
            return i
          }
        }
        return -1
      }
      if (!item.check) {
        this.optionsData.forEach((elm,idx) => {
          if (item.value == elm.value) {
            let index = this.selectedOptions.getArrayIndex(item.value)
            this.selectedOptions.splice(index,1)
          }
        })
      } else {
        this.optionsData.forEach((elm,idx) => {
          if (item.value == elm.value) {
            this.selectedOptions.push(elm.value)
          }
        })
      }
      this.optionsAll = this.selectedOptions.length === this.optionsData.length
      // console.log(this.selectedOptions,this.optionsData)
      this.$emit('selected',this.selectedOptions)
    }
  }
}
</script>

<style lang="scss">
.select-checked {
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    content: '';
  }
  .el-checkbox {
    width: 100%;
    padding: 0 30px;
    .el-checkbox__label {
      margin-left: 20px;
    }
  }
  .el-select-dropdown__item {
    padding: 0;
  }
  .el-tag__close,';
      }
    }
  }
}
</style>

元件中使用

<!--  -->
<template>
  <div class="content-box select-checked">
    <div class="container">
      <Select :options="options" @selected="selected"/>
    </div>
  </div>
</template>

<script>
import SelectTest from '@/components/Select/Select'

export default {
  name: 'record',components: {
    Select,data() {
    return {
      options: [
        {
          value: '001',check: true
        },check: true
        }
      ],watch: {
   
  },methods: {
    selected(value){
      console.log(value);
    }
  },mounted() {}
}
</script>

效果如下：

在這裡插入圖片描述

到此這篇關於elementUI實現下拉選項加多選框的示例程式碼的文章就介紹到這了,更多相關element 下拉選項加多選框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

elementUI實現下拉選項加多選框的示例程式碼

目錄下拉加多選框升級—新增全部選項需求改版完善因產品需求和UI樣式調整，和element自帶的下拉多選有衝突，索性自己嘗試修改如下：

vue+elementui實現下拉表格多選和搜尋功能

本文例項為大家分享了+elementui實現下拉表格多選和搜尋的具體程式碼，供大家參考，具體內容如下

基於selenium及python實現下拉選項定位select

1、Select元素 2、定位select 方法一：二次定位 先定位 select 框，再定位 select 裡的選項

vant-list實現下拉載入更多

1 <template> 2<div class=\"home-wrapper\"> 3<div class=\"swipe-box\"> 4<van-swipe :autoplay=\"3000\">

微信小程式實現下拉載入更多商品

本文例項為大家分享了微信小程式下拉載入更多商品的具體程式碼，供大家參考，具體內容如下

基於ElementUI中Table巢狀實現多選的示例程式碼

前言： 寫這個是因為幫朋友修改專案中的bug 我也是第一次寫這個功能，有不對的希望大家指正，如果看完有幫助點個贊！

Vue實現下拉載入更多

熟悉Element-UI的開發者可能都會有這樣的經歷，它的無限滾動 InfiniteScroll 並不好用，下面介紹兩種下拉載入的實現方法：

ElementUI的el-select怎樣實現下拉多選並實現給下拉框賦值和獲取值

場景 要實現的效果如下 官方示例程式碼實現多選 為el-select設定multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的陣列。

使用elementui的級聯選擇器實現多分組多選項的多選效果

需求：實現多選表中的欄位 1.多選框--checkbox 要實現多選效果，首先想到的是多選框--checkbox，可以使用多選框組來實現多選功能。

Vue + Element 實現多選框選項上限提示與限定

上圖先，看效果！！！ //vue資料夾內<el-form :model=\"form\" class=\"form-inline\"> <!-- :style=\"selectNum >= 8 || selectNum <=1 ? \'pointer-events: none;\' : \'\'\"

Flutter如何實現下拉重新整理和上拉載入更多

https://blog.csdn.net/huangxiaoguo1/article/details/85603172 效果 下拉重新整理 如果實現下拉重新整理，必須藉助RefreshIndicator，在listview外面包裹一層RefreshIndicator，然後在RefreshIndicator裡面實

解決element-ui裡的下拉多選框 el-select 時,預設值不可刪除問題

這是一個專案中常見的需求，el-select 為下拉多選，預設值不可刪除，或者指定值不可刪除。

小程式實現簡單分頁功能（下拉載入更多）

1、先建一個List頁面 2、在json檔案裡寫好小程式的分頁配置 { \"navigationBarTitleText\": \"管理記錄\",

購物車加減庫存以及多選框的選擇實現改變總價

{__NOLAYOUT__} <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Document</title>

js、jq實現select 下拉選擇更多

<html> <head> <meta charset=\"utf-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">

下拉列表多選框計算選中的值相加求和

html程式碼 <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">物業費:</label>

原生js實現下拉重新整理和上拉載入更多

本文例項為大家分享了實現下拉重新整理和上拉載入更多的具體程式碼，供大家參考，具體內容如下

JQUERY+PHP實現二級下拉選項

轉其它高手的寫法，不是原創，不適用LAYUI，我也是在LAYUI裡除錯了半天都沒有成功

【Excel VBA】可搜尋的下拉多選框

分享一個關於Excel下拉框多選，並且支援搜尋的案例點選下載示例Excel檔案（內含程式碼）

Flutter 實現下拉重新整理上拉載入的示例程式碼

本文介紹了Flutter 實現下拉重新整理上拉載入的示例程式碼，分享給大家，具體如下：