VueTreeselect禁用已选选项点击取消功能的实现方案求助

核心方案：通过事件捕获阻止点击事件传递 #

VueTreeselect的已选标签点击移除逻辑绑定在父容器上，我们可以在value-label插槽的最外层元素上使用事件捕获+阻止冒泡的方式，拦截点击事件，同时不影响el-tooltip的hover效果。

修改后的代码如下：

<treeselect 
  :multiple="true" 
  :options="options" 
  :flat="true" 
  v-model="selectedItems"
  :backspaceRemoves="false"
>
  <div slot="value-label" slot-scope="{ node }" @click.capture.stop>
    <el-tooltip :content="node.raw.label" placement="bottom" :disabled="node.raw.label < 10">
      <span>{{node.raw.label}}</span>
    </el-tooltip>
  </div>
</treeselect>

原理说明 #

• @click.capture：让事件在捕获阶段触发，先于组件自身的点击事件执行
• .stop：阻止事件继续传递，使VueTreeselect的父容器无法收到点击事件，从而不会触发移除已选选项的逻辑
• el-tooltip的hover依赖mouseenter/mouseleave事件，不受click事件拦截影响，提示功能可正常保留

额外处理：禁用移除按钮（可选） #

如果组件显示了默认的移除叉号（.vue-treeselect__multi-value__remove），可通过CSS隐藏或阻止其点击：

/* 隐藏移除叉号 */
.vue-treeselect__multi-value__remove {
  display: none;
}

/* 或者阻止叉号的点击事件 */
.vue-treeselect__multi-value__remove {
  pointer-events: none;
}

备选方案：监听值变化强制保留已选项 #

如果事件拦截方式不生效，可通过监听组件的input事件，在值变化时强制恢复被移除的选项：

<treeselect 
  :multiple="true" 
  :options="options" 
  :flat="true" 
  v-model="selectedItems"
  :backspaceRemoves="false"
  @input="handleTreeselectInput"
>
  <!-- 插槽内容保持不变 -->
</treeselect>

methods: {
  handleTreeselectInput(newValue) {
    // 对比新旧值，将被移除的选项重新添加回去
    const removedItems = this.selectedItems.filter(item => !newValue.includes(item))
    if (removedItems.length) {
      this.selectedItems = [...newValue, ...removedItems]
    }
  }
}

这种方式属于被动修复，兼容性更好但效率略低于事件拦截方案。

内容的提问来源于stack exchange，提问作者quanganhshyn