Vue2自定义select2指令追加选项并设置为选中值的实现咨询

方案1：无需修改现有指令（快速实现） #

你当前的自定义指令中存在500ms的初始化延时，因此只需要在mounted中等待初始化完成后操作select2实例即可：

1. 首先给select元素添加ref属性：

<select ref="userSelect" v-select="select_options" v-model="user_id"></select>

2. 在mounted生命周期中添加操作逻辑：

mounted() {
  // 延时设置为600ms，保证指令内部的select2初始化完成
  setTimeout(() => {
    const $select = $(this.$refs.userSelect)
    // 替换为你实际要追加的选项数据
    const targetOption = {
      id: 100,
      text: "指定用户"
    }
    // 追加新选项到下拉列表
    $select.append(new Option(targetOption.text, targetOption.id))
    // 给绑定变量赋值
    this.user_id = targetOption.id
    // 触发select2更新选中状态
    $select.trigger('change')
  }, 600)
}

方案2：优化指令后稳定实现（推荐） #

原有指令中的500ms硬编码延时属于冗余逻辑，优化指令后可以避免硬编码延时带来的不稳定问题：

1. 调整select2指令代码，移除冗余延时，新增初始化完成事件：

// Select2 directive file
import Vue from "vue";

function updateFunction (el, binding) {
    Vue.nextTick(function () {
        let options = binding.value || {};
        $(el).select2(Object.assign({}, {}, options))
        .on("select2:select select2:unselect", (e) => {
            el.dispatchEvent(new Event('change', { target: e.target }));
        })
        .on('change', function(e) {
            if (e.detail === "vue-directive") {
              return;
            }
            el.dispatchEvent(new CustomEvent("change", {
              detail: "vue-directive"
            }));
            return false;
          });
        // 初始化完成后触发自定义事件
        el.dispatchEvent(new CustomEvent('select2:init'))
    });
}

// Initialize the directive.
export const select = {
    inserted: updateFunction,
    componentUpdated: updateFunction,
    params: ["placeholder"]
};

Vue.directive("select2", select);

2. 在组件模板中监听初始化完成事件：

<select 
  ref="userSelect" 
  v-select="select_options" 
  v-model="user_id"
  @select2:init="handleSelect2Init"
></select>

3. 在组件methods中添加对应处理逻辑：

methods: {
  handleSelect2Init() {
    const $select = $(this.$refs.userSelect)
    // 替换为实际的选项数据
    const targetOption = {
      id: 100,
      text: "指定用户"
    }
    // 若要将选项插到列表最前面，可替换为$select.prepend(...)
    $select.append(new Option(targetOption.text, targetOption.id))
    this.user_id = targetOption.id
    $select.trigger('change')
  }
}

注意事项 #

• 如果是多选select2，设置值时需传入id数组，同时new Option的第四个参数设为true
• 若不需要保留原有ajax加载的选项，可先调用$select.empty()清空列表后再追加新选项

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