Vue自定义指令——el-select多选框 设置默认值并且不可编辑

22 篇文章 1 订阅
7 篇文章 0 订阅

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

因为el-select原生就可以实现下拉列表的选项禁用,指定项不可添加。那么想要实现设置默认值并且不可编辑,只要实现默认值不可删除即可。

关闭按钮有着它自己的className:el-tag__close。

那么只要将默认值的el-tag__close图标全部隐藏掉,就能实现设置默认值不可删除效果。

具体指令如下:

import Vue from 'vue';
 
Vue.directive('defaultSelect', {
  bind(el, bindings) {
    const [defaultValues] = bindings.value //获取设置的不可编辑默认值
    // 将默认值的close图标隐藏掉
    const dealStyle = (tags) => {
      //循环将默认值数量的 close 图标隐藏
      tags.forEach((el, index) => {
        if (
          index <= defaultValues.length - 1 &&
          ![...el.classList].includes('select-tag-close-none')
        ) {
          el.style.display = 'none' // close 图标隐藏掉
        }
      })
    }
    // 隐藏 el-tag__close
    const tags = el.querySelectorAll('.el-tag__close')
    if (tags.length === 0) {
      setTimeout(() => {
        const tagTemp = el.querySelectorAll('.el-tag__close')
        dealStyle(tagTemp)
      })
    } else {
      dealStyle(tags)
    }
  }
})

 在el-select中的应用:

<el-select
  v-defaultSelect="[defaultSelect]" //这里就是二维数组,没有错
  v-model="value"
  multiple
  placeholder="请选择"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="defaultSelect.includes(item.value)"
  >
  </el-option>
</el-select>
value: ['选项1', '选项2', '选项3'],
options: [
  { label: '选项1', value: '选项1' },
  { label: '选项2', value: '选项2' },
  { label: '选项3', value: '选项3' },
  { label: '选项4', value: '选项4' },
  { label: '选项5', value: '选项5' },
],
defaultSelect: ['选项1', '选项2', '选项3'],

  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值