vue3 el-select多选框 设置默认值不可删除

于 2024-05-08 09:56:45 发布
阅读量137 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xxxxxx_q/article/details/138560485
版权

需求：选择器有一个默认值【全部】，单击删除时不能删除

我看好多人写的都是自定义指令去设置对应的样式，但是这是最好的情况！然而我看不到，呃呃呃

我看了element-plus  有个方法   去除tag 时的方法

因此，我想 了一个笨办法，当点击这个方法时，点击的是不能删除的值时，我就在吧这个数据绑上去，。。。。。。。。。效果是可以的。。。。。。。。。。

如果有类似的情况，可以看看，当然自定义指令是比较好的

爱吃苦头
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-select 多选框，默认值不可删除实现方法。
weixin_44445363的博客
09-07 3743
elementui el-select 多选框，默认值不可删除实现方法。只限固定的默认值 <el-select v-model="value1" multiple placeholder="请选择" @change="handleChose"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue +el+select 下拉框选择全部多选
weixin_64374806的博客
07-11 675
【代码】vue +el+select 下拉框多选。
el-select下拉多选框 el-select 设置默认值不可删除功能
最新发布
qq2754289818的博客
08-31 2746
Element-UI是一款广泛使用的Vue.js组件库，其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而，在Element 3.0版本中，El-Select下拉多选框默认值可被删除，这可能会导致一些意外情况。本文将介绍如何解决这个问题，实现El-Select下拉多选框设置默认值不可删除的功能。
el-select多选时候之后，展示多选条件不允许被删除
Fhm123456_的博客
06-20 2299
效果如图：第一步：el-select 加一个ref属性，例如：ref="medicalAdviceRef"，为了操作js用，第二部：
elementui中当el-select下拉框绑定multiple多选后无法编辑删除
m0_61676604的博客
05-12 1793
el-select绑定了multiple实现下拉框多选，由于数据深层嵌套，会出现视觉上好像多选下拉框无法编辑、删除，其实数据更新了，但是页面没有重新渲染，所以我们需要调用this.$forceUpdate()方法强制Vue实例重新渲染。解决办法：在el-select下拉框组件中绑定@change="$forceUpdate()即可实现"
vue ＜el-checkbox-group＞多选框回显
toString的博客
08-24 2723
vue多选框回显问题
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
vue.js 解决v-model让select默认选中不生效的问题
11-20
笔者今天在开发中遇到一个看起来很神奇的问题，平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中，今天无论如何都选不中，后来经过很久的复查和大神的一句话终于解决这个这个问题，顺便分享一下...
vue select二级联动第二级默认选中第一个option值的实例
08-28
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中el-checkbox全选、反选、多选
qq_45268602的博客
02-18 8492
实现一组数据的全选、反选、多选操作
el-select 下拉框多选实现全选
热门推荐
小小迎的博客
10-23 2万+
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 1.下拉选项全都勾选时，【全选】自动勾选； 2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选； 3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选； 4.下拉选项和【全选】都选上的时候，不勾选任意...
Vue+Element-ui实例_el-checkbox二级复选框
徐小硕—心之所向，素履以往
01-06 4530
想必大家在很多时候都会碰到多级复选框的情况吧，下面这篇文章介绍了vue结合el-checkbox组件，编写的一个二级复选框案例（多级也可以根据此案例仿写）。 主要难点： （1）多次使用v-for循环，把需要展示的复选框按照，一级——二级的样式展现出来。 （2）当一级复选框选中时，二级复选框全选，当二级复选框非全选时，一级复选项为不选中状态，当二级复选框为全选时，一级复选框为选中状态。 （3）全部全选，和全部取消选中。 （4）记录选中的二级复选框id，方便后续操作。 效果图如下： 下面是
vue elementui checkbox多选框功能
buukyjmvni的博客
09-09 2981
一、在选择框上方添加一个多选 //增加的 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="fla" >全选</el-checkbox > //以下是被选择的数据
vue这种多选框处理（multiselection）
weixin_43482333的博客
07-15 2689
vue这种多选框处理（multiselection）
vue+element-ui中checkbox多选框功能的实现
qq_1307495的博客
04-19 5021
工作中遇到这样一个问题，需要一个隐藏的多选框，鼠标移入之后才会显示出未选择状态，当点击选择，就会显示出也选择状态，且不会再隐藏，记录记录。 首先 中间是绑定的数据循环 <div class="hk-recruit-apply"> <div class="hk-recruit-title"> <span class="font-16 text-blacks ...
vue基于element多选框el-select实现一次选择全部和取消全部选择
weixin_41462690的博客
11-25 8155
在实际vue项目使用多选框时，倘若用户需要选择多个选项，那他就需要点击多次；该代码实现点击一次即选择全部，并将全部选项显示在多选框内
vue el-checkbox实现全选单选
baozisss的博客
11-02 1万+
要求的页面结构是这样的： 遇到了许多问题，如：点击tab切换后 全选按钮要点击2次可以生效。。。 我这里就不一 一多说了。直接上代码。 &lt;el-row class="list-header"&gt; &lt;el-col :span="6"&gt;&lt;el-checkbox class="checkbox" :checked="isCheckedAll" v-mod
el-select 默认值
08-15
el-select的默认值可以通过给v-model绑定的属性赋初始值来设置。在上面的代码中，v-model绑定的属性是"value"。所以可以通过在data中给"value"属性赋初值来设置el-select的默认值。例如，可以将"value"属性设置为['选项1', '选项2', '选项3']来设置el-select的默认选项为选项1、选项2和选项3。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [如何给el-select赋默认值](https://blog.csdn.net/qq_42931285/article/details/125039608)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue自定义指令——el-select多选框 设置默认值并且不可编辑](https://blog.csdn.net/sugerinaflat/article/details/125339457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue elementUI select下拉框设置默认值](https://blog.csdn.net/qq_41968486/article/details/109003440)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值