Element中Select選擇器的實現

2022-03-24 10:00:03

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

今天來整理一下目前最喜歡的el元件 el-select:Element官網

最近真的做夢都是這個元件的相關屬性clearable和filterable和對應的勾點函數@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>

很容易發現我們遍歷的是一個陣列物件，其中顯示出來的是label，但是真正對應的值卻是value屬性

在專案中經常有這樣的下拉框，讓我們選擇，有兩種情況，一種下拉框是靜態的，就是下拉框的資料是前端寫好的，第二種更加有趣，是動態的，是從資料庫中獲取的

在我們實際開發過程中這個下拉框的屬性大部分是由後臺查詢取到的，舉個案例如下

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

{

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

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

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

其實這裡我們多實踐也可以更好的瞭解物件導向程式設計這一個概念，JavaScript就是一個物件導向程式設計的語言，我們後臺傳送給前端的就是一個有一個陣列物件，我們只是展示了其中物件中的某一個屬性

來分析一下前端的思路

前端定義一個陣列來接這個物件
options = []

this.options = res.content;

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

簡單的總結一下 options相當於一個陣列物件的集合，遍歷出來顯示的是具體的label，但是真實的值是value屬性代表的

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

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

filterable 代表我們可以搜尋，資料量大的時候我們進行相關操作

關於對應的勾點函數的應用案例：這個是內建的，我們改變某一個屬性的時候我們目的就是獲取它的值或者執行什麼方法，這裡用@change或者@remove-tag都是可以直接使用的，詳情大家自己實踐

remove-tag 代表：多選模式下移除tag時觸發 /移除的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>

Element中Select選擇器的實現

熱門文章