el-select下拉多选框 el-select 设置默认值不可删除功能

简介: Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。

Element3.0+vue3.0 el-select下拉多选框 el-select 设置默认值不可删除功能


Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。



场景


假设我们正在开发一个商品筛选页面,在商品状态的多选筛选条件中,有一个"默认"选项,用于选择默认状态的商品。我们希望用户无法取消选择“默认”选项,以确保至少有一个状态被选中。


功能分析


首先 el-select是不支持这个功能的 最多可以禁止el-option 的 disabled属性

源码:



  • 所以需要我们更改一下代码 当el-option的disabled为true的时候 把select-tag-close-none属性为none
    这样就实现了


实战在mian.js中放入以下代码就可以了


亿点小知识:vue3.0中是 app.directive 在 vue2.0中是 Vue


vue3.0中



app.directive("defaultSelect", {
  componentUpdated(el, bindings) {
    const [values, options, prop, defaultProp, defaultValue] = bindings.value;
    const indexs = [];
    const tempData = values.map(item => options.find(op => op[prop] === item));
    tempData.forEach((item, index) => {
      if (item[defaultProp] === defaultValue) {
        indexs.push(index);
      }
    });
    const dealStyle = function(tags) {
      tags.forEach((el, index) => {
        if (indexs.includes(index) && ![...el.classList].includes("select-tag-close-none")) {
          el.classList.add("none");
        }
      });
    };
    const tags = el.querySelectorAll(".el-tag__close");
    if (tags.length === 0) {
      setTimeout(() => {
        const tagTemp = el.querySelectorAll(".el-tag__close");
        dealStyle(tagTemp);
      });
    } else {
      dealStyle(tags);
    }
  }
});


452fc0d979e945b6bc746cbab77564b3.gif

以上就是el-select下拉多选框 el-select 设置默认值不可删除功能感谢大家的阅读


如碰到其他的问题 可以私下我 一起探讨学习


如果对你有所帮助还请 点赞 收藏谢谢~!


关注收藏博客 作者会持续更新…

相关文章
|
7月前
|
前端开发 微服务
Element-Plus 表格 el-table 如何支持分页多选
Element-Plus 表格 el-table 如何支持分页多选
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
264 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
4月前
ElementPlus 之 el-select 多选实现全选功能
本文介绍了在ElementPlus框架中,如何通过自定义事件处理和条件判断实现`el-select`多选控件的全选功能。
810 1
ElementPlus 之 el-select 多选实现全选功能
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
769 1
|
5月前
el-select 全选
el-select 全选
41 0
|
5月前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
247 0
|
前端开发
el-table 在第一行添加合计行和操作按钮
el-table 在第一行添加合计行和操作按钮
176 0
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
773 0