Element中Select選擇器的實現(xiàn)

更新時間：2022年03月24日 09:23:53 作者：辰兮要努力

本文主要介紹了Element中Select選擇器的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇是關于下拉框相關知識點總結

今天來整理一下目前最喜歡的el組件 el-select:Element官網(wǎng)

最近真的做夢都是這個組件的相關屬性clearable和filterable和對應的鉤子函數(shù)@change，所以趁著整理下來吧以免夜長夢多

在這里插入圖片描述

來我們一起學習一下element給我們提供的相關案例

<template>
  <el-select v-model="value" 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: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

很容易發(fā)現(xiàn)我們遍歷的是一個數(shù)組對象，其中顯示出來的是label，但是真正對應的值卻是value屬性

在項目中經(jīng)常有這樣的下拉框，讓我們選擇，有兩種情況，一種下拉框是靜態(tài)的，就是下拉框的數(shù)據(jù)是前端寫好的，第二種更加有趣，是動態(tài)的，是從數(shù)據(jù)庫中獲取的

在我們實際開發(fā)過程中這個下拉框的屬性大部分是由后臺查詢?nèi)〉降?，舉個案例如下

我們顯示出來的是name屬性，但是當我們要做其它操作如查詢的時候我們真正傳給后臺的是id值

{

  "content": [
?    {
?      "id": "001",
?      "name": "辰兮",
?    },
?    {
?     "id": "002",

?      "name": "辰兮要努力",
?    },
?    {
?      "id": "003",

?      "name": "辰兮打卡",
?    }
  ],
  "count": 3,
  "code": "success",
  "message": "成功"
}

其實這里我們多實踐也可以更好的了解面向對象編程這一個概念，JavaScript就是一個面向對象編程的語言，我們后臺發(fā)送給前端的就是一個有一個數(shù)組對象，我們只是展示了其中對象中的某一個屬性

來分析一下前端的思路

前端定義一個數(shù)組來接這個對象
options = []

this.options = res.content;

如何取到值
   v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"

簡單的總結一下 options相當于一個數(shù)組對象的集合，遍歷出來顯示的是具體的label，但是真實的值是value屬性代表的

來分享一下最最最常用的屬性，我一般都會加上，詳情大家也參考官網(wǎng)即可比較基礎

clearable 這個我們常用意思是可以清除

在這里插入圖片描述

filterable 代表我們可以搜索，數(shù)據(jù)量大的時候我們進行相關操作

在這里插入圖片描述

關于對應的鉤子函數(shù)的應用案例：這個是內(nèi)置的，我們改變某一個屬性的時候我們目的就是獲取它的值或者執(zhí)行什么方法，這里用@change或者@remove-tag都是可以直接使用的，詳情大家自己實踐

remove-tag 代表：多選模式下移除tag時觸發(fā) /移除的tag值
如何使用@change @remove-tag

    <el-select v-model="value1" multiple  @change="changeValue()" @remove-tag="deleteValue">
                            <el-option v-for="item in content" :key="item.sId" :label="item.sName" :value="item.sId"> </el-option>
                        </el-select>

在這里插入圖片描述