动态禁用el-select中某个选项

本文介绍了如何在JavaScript中,特别是在Vue框架中,通过遍历数组并根据特定条件为数组元素设置`disabled`属性,实现动态禁用下拉选项的功能。
摘要由CSDN通过智能技术生成

 根据条件禁用数组中的某些元素

 js:遍历数组中的值,然后根据条件禁用其中的某些元素

// 判断当前元素的id是否等于数组中的id 相等给当前元素禁用
typeList.value.forEach(() => {
  for (let i = 0; i < typeList.value.length; i++) {
    if (typeList.value[i].id === selectType.value.id) {
      typeList.value[i].disabled = true;
    }
  }
});

vue:通过:disabled动态禁用下拉选项

<el-select
  v-model="typeId"
  class="m-2 w-full"
  placeholder="请选择"
>
  <el-option
    v-for="item in typeList"
    :key="item.id"
    :label="item.name"
    :value="item.id"
    :disabled="item.disabled"
  />
</el-select>

  • 10
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听 `change` 事件来实现这个功能。具体实现步骤如下: 1. 给每个 `el-select` 绑定 `change` 事件。 2. 在事件处理函数,获取当前选选项。 3. 遍历所有 `el-select`,将当前选选项禁用,并设置其他 `el-select` 相同选项禁用状态。 4. 如果取消选当前选项,则将其解除禁用状态。 下面是一个示例代码,你可以参考一下: ```html <template> <div> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option> </el-select> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option> </el-select> </div> </template> <script> export default { data() { return { selected: '', options: [ { label: '选项1', value: '1', disabled: false }, { label: '选项2', value: '2', disabled: false }, { label: '选项3', value: '3', disabled: false }, ], }; }, methods: { handleChange() { // 获取当前选选项 const selectedOption = this.options.find(item => item.value === this.selected); // 遍历所有 el-select禁用当前选选项,并设置其他相同选项禁用状态 this.$nextTick(() => { const selects = document.querySelectorAll('.el-select'); selects.forEach(select => { const options = select.querySelectorAll('li'); options.forEach(option => { if (option.getAttribute('data-value') === selectedOption.value) { option.classList.add('is-disabled'); } if (option.classList.contains('selected')) { const value = option.getAttribute('data-value'); const sameOption = this.options.find(item => item.value === value); if (sameOption && sameOption.value !== selectedOption.value) { option.classList.add('is-disabled'); sameOption.disabled = true; } } }); }); }); }, }, }; </script> ``` 上面的代码,我们给每个 `el-select` 绑定了 `change` 事件,并在事件处理函数实现了禁用选项和解除禁用选项的逻辑。当选项状态改变时,我们通过遍历所有 `el-select`,找到需要禁用选项,并设置为禁用状态。如果取消选当前选项,则将其解除禁用状态。注意,由于 `el-select` 是异步渲染的,所以我们需要在 `$nextTick` 处理选项状态。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值