基于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的选择框的下拉可以自定义样式吗，然后去仔细看官方文档，发现确实可以做到，思路就打开了。先想应该怎么做，先假设，再去验证，这样才能快速得到结果。