基於element-ui的多選下拉框和tag標簽的二次封裝

前言：

今年這大半年我主要負責公司的后台教務管理的開發，這個管理系統目前主要是給公司的內部人員去配置公司的核心項目（例如：熊貓小課）的所有數據，例如課程的配置、課程期數的配置、課程版本的配置、活動的配置、課程安排表、管理員的權限配置、物流的管理、退款管理、學員咨詢管理等功能。因為一開始這個教務系統的原型設計就是基於element-ui 1.4.13的版本設計的，前端一開始為了和設計稿給的原型保持一致，項目中也是基於element-ui 1.4.13在開發，現在這個版本官方已經停止維護了，我們曾經嘗試過去升級element-ui到最新版本，但是發現升級后的版本和舊版本的樣式有些模塊改動太大，微調的成本太高，最終放棄了升級。所以后續基於后台管理element-ui部分的總結，我都是基於的element-ui 1.4.13的總結。

 

需要實現的效果：

選中時就顯示復選框，不選中時不顯示復選框

 

 

element-ui中提供的多選ui組件：

不符合我們的需求，所以我們需要想辦法自己封裝，但如何做呢？

 

element-ui中提供的其他組件：

我們可不可以將element-ui中提供的tag組件、復選框組件和普通的下拉框組件組合呢？因為這三個組合起來正是我們想要的效果。

      select組件中我們可以自定義下拉框中的數據展示的樣式：

     

 

如何組合呢？

<el-select class="dropdown-list" v-model="selectedValue" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.plan_id"
      :class="{active: isActive(item)}"
      :label="item.plan_name"
      :value="item.plan_id">
      <el-checkbox
        v-if="isActive(item)"
        :label="item.plan_name"
        :disabled="isActive(item)"
        :checked="isActive(item)"
        @change="valueChange(item)">
      </el-checkbox>
      <div v-else v-text="item.plan_name" @click="selectItem(item)"></div>
    </el-option>
  </el-select>

明白可以怎么做就發現很簡單了，就是重寫el-option組件，將下拉框中默認的樣式用自定義的樣式覆蓋掉，el-option組件中下拉框的樣式是定義在一個slot的插槽中的，我們在slot中定義我們自己的ui布局。

這個組件我們只需要從外部拿兩個變量值：下拉框的選項、和被選擇的選項值。

 
           
            
            
              <el-tag 
             
            
              class="el-tag" 
             
            
              v-for="tag in selectedList" 
             
            
              :key="tag.name" 
             
            
              :closable="true" 
             
            
              :type="tag.type" 
             
            
              :class="getStressStyle(tag)" 
             
            
              @close="showDelTipDialog(tag)"> 
             
            
              <!-- {{htmlToText(tag.name)}} --> 
             
            
              <span v-html="tag.name"> </span> 
             
            
              </el-tag> 
             
            
 
            
              <div class="dropdown-wrap"> 
             
            
              <el-select class="dropdown-list" v-model="selectedValue" placeholder="選擇開學課程期數"> 
             
            
              <el-option 
             
            
              v-for="item in options" 
             
            
              :key="item.plan_id" 
             
            
              :class="{active: isActive(item)}" 
             
            
              :label="item.plan_name" 
             
            
              :value="item.plan_id"> 
             
            
              <el-checkbox 
             
            
              v-if="isActive(item)" 
             
            
              :label="item.plan_name" 
             
            
              :disabled="isActive(item)" 
             
            
              :checked="isActive(item)" 
             
            
              @change="valueChange(item)"> 
             
            
              </el-checkbox> 
             
            
              <div v-else v-text="item.plan_name" @click="selectItem(item)"></div> 
             
            
              </el-option> 
             
            
              </el-select> 
             
            
              </div> 
             
            
           
         

總結：寫完之后就發現還是很簡單的，記得當時寫的時候都沒有思路，仔細想想，質疑一下element-ui的選擇框的下拉可以自定義樣式嗎，然后去仔細看官方文檔，發現確實可以做到，思路就打開了。先想應該怎么做，先假設，再去驗證，這樣才能快速得到結果。