image

前言

最近開發(fā)的后臺(tái)管理系統(tǒng)項(xiàng)目采用Vue+Element-UI技術(shù)架構(gòu)，在使用Elment-UI中Select組件的時(shí)候遇到了比較多的操作難題，官網(wǎng)上關(guān)于這個(gè)組件的使用文檔介紹的不是很詳細(xì)，僅僅提供了一些基本用法，很多拓展場景都沒有涉及到，在查閱了大量資料之后終于將目前的需求都完美解決了，這里整理一些Select組件的使用方案，希望能幫到有同樣需求的同學(xué)。

項(xiàng)目已上傳github，歡迎大家下載交流。

前端項(xiàng)目地址：https://github.com/Hanxueqing/Element-select

項(xiàng)目運(yùn)行

# 克隆到本地
git clone git@github.com:Hanxueqing/Element-select.git

# 安裝依賴
npm install

# 開啟本地服務(wù)器localhost:8080
yarn serve

# 發(fā)布環(huán)境
yarn build

使用場景

局部引入Select組件

注意這里引入Select組件的時(shí)候還需要引入Option，不然下拉列表渲染不出來，他們是兩個(gè)單獨(dú)的組件。

import { Select, Option} from 'element-ui'
Vue.use(Select)
Vue.use(Option)

使用下拉菜單展示數(shù)據(jù)項(xiàng)

v-model的值為當(dāng)前被選中的el-option的 value 屬性值，輸入框中顯示的為label屬性值。

            <el-select v-model="value" placeholder="請(qǐng)選擇">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
          </el-select>

我們將要顯示在下拉菜單中的數(shù)據(jù)寫在options數(shù)組中，給label屬性賦值姓名，讓輸入框顯示我們選中的姓名。

<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項(xiàng)1',
          company: '騰訊',
          label: '馬化騰',
          school: '深圳大學(xué)'

        }, {
          value: '選項(xiàng)2',
          company: '美團(tuán)',
          label: '王興',
          school: '清華大學(xué)'

        }, {
          value: '選項(xiàng)3',
          company: '小米',
          label: '雷軍',
          school: '武漢大學(xué)'

        }, {
          value: '選項(xiàng)4',
          company: '今日頭條',
          label: '張一鳴',
          school: '南開大學(xué)'

        }, {
          value: '選項(xiàng)5',
          company: '紅杉資本',
          label: '沈南鵬',
          school: '耶魯大學(xué)'

        }],
        value: ''
      }
    }
  }
</script>

效果演示：

image

為select設(shè)定默認(rèn)值

將默認(rèn)值賦給v-model綁定的數(shù)據(jù)即可，此處我們給v-model綁定的是value，所以在data中給value賦值為"馬化騰"為默認(rèn)值。

value: '馬化騰'

在輸入框按下回車，選擇第一個(gè)匹配項(xiàng)

在el-select標(biāo)簽中添加default-first-option屬性，需配合 filterable 或 remote 使用。

在下拉菜單中，展示多項(xiàng)數(shù)據(jù)

目前我們在options數(shù)組中為每一個(gè)數(shù)據(jù)定義了三個(gè)字段，分別是公司、姓名和畢業(yè)院校，但是下拉列表中只能顯示姓名，所以我們要自定義HTML模板，插入el-option中的slot。

<el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value"
  :disabled="item.disabled">
  <span style="float: left">{{ item.company }}</span>
  <span style="float: left">{{ item.label }}</span>
  <span style="float: left">{{ item.school }}</span>
</el-option>

效果演示：

image

給el-select添加唯一class名

我們修改了列表項(xiàng)的樣式，但是頁面中可能會(huì)使用多個(gè)select組件，直接修改會(huì)影響全局樣式，在頁面渲染的時(shí)候，el-select總是會(huì)被渲染為僅次于body層級(jí)的div，我們沒有辦法通過父級(jí)限制它，所以我們需要給它自身添加一個(gè)class名。

  .el-select-dropdown__item span{
    width:100px;
    text-align:center;
  }

在el-select上按照常規(guī)方法添加class = "optionsContent"，不生效，給el-select加父標(biāo)簽<div class = "optionsContainter">來包裹el-select也沒用。

            <div class = "optionsContainter">
              <el-select v-model="value" placeholder="請(qǐng)選擇" class = "optionsContent">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                  <span style="float: left">{{ item.company }}</span>
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: left">{{ item.school }}</span>
                </el-option>
            </el-select>
            </div>

在控制臺(tái)中查看渲染結(jié)果可以看到，class名和div根本沒有被渲染出來。

image

這里需要將class改為propper-class

<el-select v-model="value" placeholder="請(qǐng)選擇" popper-class = "optionsContent">

通過popper-class來自定義一個(gè)類，這樣子在控制臺(tái)可以看到，自定義的類渲染到頁面上的效果，class名已經(jīng)添加成功了：

image

根據(jù)輸入條件模糊查詢

有的時(shí)候我們需要根據(jù)用戶在input框中輸入的內(nèi)容提供對(duì)應(yīng)的列表項(xiàng)。這時(shí)候需要為el-select添加filterable屬性即可啟用搜索功能。

效果演示：

image

當(dāng)我們想實(shí)現(xiàn)輸入拼音首字母檢索的時(shí)候，就需要使用filter-method給它傳入一個(gè)函數(shù)方法。

默認(rèn)情況下，Select 會(huì)找出所有label屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯，可以通過傳入一個(gè)filter-method來實(shí)現(xiàn)。filter-method為一個(gè)Function，它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用，參數(shù)為當(dāng)前輸入值。

給options中的每一個(gè)數(shù)據(jù)項(xiàng)添加szm字段，賦值為姓名拼音首字母

{
          value: '選項(xiàng)1',
          company: '騰訊',
          label: '馬化騰',
          school: '深圳大學(xué)',
          szm:'mht'

        }

el-select標(biāo)簽中給filter-method綁定filter方法

<el-select v-model="value" placeholder="請(qǐng)選擇" popper-class = "optionsContent" filterable :filter-method="filter">

在method中編寫filter方法

filter(v) {
        // 對(duì)綁定數(shù)據(jù)賦值
        this.options = this.copy.filter((item) => {
          // 如果直接包含輸入值直接返回true
          const val = v.toLowerCase()
          if (item.label.indexOf(val) !== -1) return true
          if (item.szm.substring(0, 1).indexOf(val) !== -1) return true
          if (item.szm.indexOf(val) !== -1) return true
        })
      }

在mounted中給copy數(shù)據(jù)賦值，保留數(shù)據(jù)源

mounted () {
      // 保留數(shù)據(jù)源
      this.copy = Object.assign(this.options)
    }

效果演示：

image

在Select 組件頭部插入內(nèi)容

當(dāng)你需要在select的input框中插入內(nèi)容時(shí)就需要用到組件提供的slot具名插槽，name值為：prefix。

              <template slot = "prefix">
                <span class = 'prefixSlot'>互聯(lián)網(wǎng)大佬</span>
              </template>

image

在Option 下拉列表插入內(nèi)容

如果我們需要在Option下拉列表中插入內(nèi)容，官方也給我們提供了slot匿名插槽。比如，我們在數(shù)據(jù)項(xiàng)之前添加一個(gè)表頭：

          <template>
            <div class = "optionHeader" v-show = 'optionVisible'>
              <span style="float: left">姓名</span>
              <span style="float: left;">卡號(hào)</span>
              <span style="float: left;">手機(jī)號(hào)</span>
            </div>
          </template>

image

外部組件獲得下拉列表選中項(xiàng)數(shù)據(jù)

我們需要將下拉列表中選中的數(shù)據(jù)展示在外部頁面中，在el-option標(biāo)簽中給value值綁定item.value，那么v-model里的value將會(huì)得到選中對(duì)象的value，如果賦值為item，那將會(huì)得到選中的對(duì)象，可以在change事件里將返回的值分別賦值給需要的變量。

我們給el-select的chage事件綁定showMessage方法，參數(shù)是$event

<el-select v-model="value" placeholder="請(qǐng)選擇" popper-class = "optionsContent" filterable :filter-method="filter" @change="showMessage($event)">

我們先打印一下獲得的參數(shù)，可以獲取到選中的對(duì)象

image

在methods中定義showMessage方法，給對(duì)應(yīng)的數(shù)據(jù)賦值

      showMessage(e){
        console.log(e)
        this.v_company = e.company;
        this.v_label = e.label;
        this.v_school = e.school
      }

在頁面中展示我們獲得的數(shù)據(jù)

          <div class = "title">
            <span>公司：{{v_company}}</span>
            <span>姓名：{{v_label}}</span>
            <span>畢業(yè)院校：{{v_school}}</span>
          </div>

效果演示：

image

當(dāng)輸入框?yàn)榭盏臅r(shí)候不顯示下拉列表，輸入數(shù)據(jù)的時(shí)候根據(jù)輸入內(nèi)容顯示對(duì)應(yīng)列表項(xiàng)

現(xiàn)在默認(rèn)是輸入框獲取焦點(diǎn)的時(shí)候就顯示全部列表項(xiàng)，但是當(dāng)我們涉及到一些保密功能時(shí)，不希望顯示全部的列表項(xiàng)，比如選擇會(huì)員，我們不能一開就將會(huì)員信息全部展示出來，所以一開始需要在data中設(shè)置一個(gè)數(shù)據(jù)optionVisible:false，控制下拉列表的顯示與隱藏。

下拉列表的默認(rèn)樣式也需要做一些修改，去掉小尖頭、邊框、最小寬度和盒子陰影。

  .popper__arrow{
    display: none!important;
  }
  .el-select-dropdown{
    box-shadow: none!important;
    min-width: 0px;
    border:0!important;
  }

給el-select和el-option添加v-show指令v-show = 'optionVisible'，在el-select標(biāo)簽上綁定@keyup.native = "showOption"方法，編寫showOption方法，判斷輸入框中的數(shù)據(jù)長度不為0時(shí)，顯示下拉列表。

showOption(){
        let inputContent = document.getElementsByClassName('el-input__inner')[0].value
        console.log(inputContent.length)
        if(inputContent.length != 0){
          this.optionVisible = true;
        }
      }

效果演示：

image