美文网首页
vue2 自定义指令实现el-select 多选隐藏关闭按钮

vue2 自定义指令实现el-select 多选隐藏关闭按钮

作者: waiterYu | 来源:发表于2021-12-20 14:17 被阅读0次

    效果


    <el-select v-model="value1" v-select="value1" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
    

    指令

    Vue.directive('select', {
      // 当绑定元素插入到 DOM 中。
      inserted: function(el:any) {
        console.log(el)
      },
      update: function(el:any, binding:any) {
        // 不加演示器会出现第一次不触发问题
        setTimeout(() => {
          const domSelect = el.children[0].children[0]
          domSelect.children.forEach((item:any) => {
            if (item.children[0].innerText === '黄金糕') {
              item.children[1].style.display = 'none'
            }
          })
        }, 0)
      }
    })
    

    相关文章

      网友评论

          本文标题:vue2 自定义指令实现el-select 多选隐藏关闭按钮

          本文链接:https://www.haomeiwen.com/subject/pihzfrtx.html