Vue.js点击新增行后Select2可搜索下拉框搜索选项不显示问题

问题根因 #

Select2插件的初始化仅作用于初始化执行时已经存在于DOM树中的元素。页面首次加载时第一行元素已经完成渲染，初始化后正常生效；新增行属于动态生成的DOM节点，没有触发过Select2初始化逻辑，因此只会展示原生下拉列表样式。

修复步骤 #

1. 抽离公共的Select2初始化函数，避免重复写配置代码：

// 把你原来的Select2配置原封不动放到这个方法里
function initSelect2(targetEl) {
  $(targetEl).select2({
    placeholder: "请选择选项",
    allowClear: true,
    // 其他你之前用到的配置项保持不变
  })
}

2. 保留页面初始加载时的初始化逻辑，给默认渲染的第一行下拉框执行初始化。
3. 在addrowcontact新增行的逻辑中，新增数据后通过Vue的$nextTick等待DOM渲染完成，再给新生成的下拉框执行初始化：

addrowcontact() {
  // 你原本的新增行数据逻辑，比如向列表push新数据的代码保持不变
  this.contactList.push({
    // 新行的字段配置
  })
  // 新增DOM渲染完成后初始化新行的Select2
  this.$nextTick(() => {
    // 选择最后一个新增行的下拉框元素（替换成你实际的下拉框类名）
    initSelect2($('.custom-select-class:last'))
  })
}

注意事项 #

• 动态生成的下拉框不要设置重复的id属性，优先使用类名选择器定位元素，避免初始化冲突
• 如果涉及行删除操作，删除前先调用$(targetEl).select2('destroy')销毁对应实例，避免内存泄漏
• 如果Select2绑定的值需要同步到Vue的响应式数据中，可以在初始化时监听change事件同步值：

$(targetEl).select2(/*配置*/).on('change', function() {
  // 把选中值同步到Vue对应的响应式变量中
})

内容的提问来源于stack exchange，提问作者Jahid Hasan Anik