基于element-ui的多选下拉框和tag标签的二次封装

Posted yy95

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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组件中我们可以自定义下拉框中的数据展示的样式:

     技术分享图片

技术分享图片

 

如何组合呢?

 1 <el-select class="dropdown-list" v-model="selectedValue" placeholder="请选择">
 2     <el-option
 3       v-for="item in options"
 4       :key="item.plan_id"
 5       :class="{active: isActive(item)}"
 6       :label="item.plan_name"
 7       :value="item.plan_id">
 8       <el-checkbox
 9         v-if="isActive(item)"
10         :label="item.plan_name"
11         :disabled="isActive(item)"
12         :checked="isActive(item)"
13         @change="valueChange(item)">
14       </el-checkbox>
15       <div v-else v-text="item.plan_name" @click="selectItem(item)"></div>
16     </el-option>
17   </el-select>

明白可以怎么做就发现很简单了,就是重写el-option组件,将下拉框中默认的样式用自定义的样式覆盖掉,el-option组件中下拉框的样式是定义在一个slot的插槽中的,我们在slot中定义我们自己的ui布局。

这个组件我们只需要从外部拿两个变量值:下拉框的选项、和被选择的选项值。


<template>
<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>
</template>

<script>
export default {
props: {
options: Array,
selected: Array
},

mounted() {
this.selectedItems = this.selected;
},

watch: {
selected: {
handler(val) {
this.selectedItems = val;
},
deep: true
},

methods: {
//选中
selectItem(item) {
// debugger
let newArr = JSON.parse(JSON.stringify(this.selectedItems));
let newItem = JSON.parse(JSON.stringify(item));
newItem.type = "primary";
newItem.name = item.plan_name;
newItem.plan_id = item.plan_id;
newItem.version_id = item.version_id;
newArr.push(newItem);
this.selectedItems = newArr;
this.$emit("valueChange",JSON.parse(JSON.stringify(newItem)), newArr);
},

//取消选择
valueChange(item) {
this.$emit(‘del‘, item)
},

isActive(data) {
// debugger
return this.selectedItems.some(item => item.plan_id === data.plan_id);
},
}
};
</script>

<style lang="scss" scoped>
.active {
display: block;
}

.cpt-dropdown-list {
display: inline-block;

.dropdown-link {
color: #409eff;
cursor: pointer;
}
}

.dropdown-list {
.el-select-dropdown {
display: none !important;
}
}

.el-dropdown-menu.cpt-dropdown-list-wrap {
min-width: 188.09px;
left: 345px !important;
}
</style>
<style lang="scss">
// .dropdown-list {
.el-select-dropdown__item.selected {
background-color: rgba(color: #409eff, opacity: 0.1);
color: #48576a;
}

.el-select-dropdown__item.selected.hover {
//
background-color: rgba(color: #409eff, opacity: 0.1);
color: #48576a;
}
// }
</style>
 

总结:写完之后就发现还是很简单的,记得当时写的时候都没有思路,仔细想想,质疑一下element-ui的选择框的下拉可以自定义样式吗,然后去仔细看官方文档,发现确实可以做到,思路就打开了。先想应该怎么做,先假设,再去验证,这样才能快速得到结果。

 

以上是关于基于element-ui的多选下拉框和tag标签的二次封装的主要内容,如果未能解决你的问题,请参考以下文章

fastadmin 实现标签的多选研究---基于fa的test案例

fastadmin 实现标签的多选研究---基于fa的test案例

select2的多选下拉框上传

基于 deluge 中的多选下拉菜单从 zoho creator 搜索记录

求jquery版的多选树形下拉框的插件(Multiple ComboTree)?

element-ui中点击input框和下拉框会出现跳动的现象