element-ui Select组件在Dialog中值改变不触发change事件的解决方案

作者：雾松时间：2026-10-22 17:20:17浏览：463

本文解决element-ui中Select组件在Dialog弹窗内使用时，因后台响应数据缺失特定字段导致绑定值改变但不触发change事件的问题。提供两种方案：一是要求后端始终返回该字段，二是在前端赋值前手动补全字段，确保事件正常触发。

环境搭建与组件引入

首先，需要安装vuecli脚手架以构建项目环境。

接着，在终端中执行相关命令进行初始化操作。


cnpm i element-ui -S

随后，安装element-ui库以支持UI组件的使用。

为了优化加载速度，建议按需引入select组件，避免全量引入带来的性能损耗。

在项目的main.js文件中，配置相应的引入代码以注册组件。


/* 导入第三方库开始 */
import 'element-ui/lib/theme-chalk/index.css';
// 按需加载Select组件
import {Select,Option,Dialog,Button} from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(Dialog)
Vue.use(Button)
// Vue.component(Select.name,Select);
// 或写为Vue.use(Button)
/* 导入第三方库结束 */

接下来，查看HelloWorld.vue组件的具体代码实现，了解基础结构。


<template>
<div>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   width="30%">
   <span>{{selVal}}</span>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
  </el-dialog>

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

<script>
 export default {
  data() {
   return {
    options: [{
     value: '选项1',
     label: '黄金糕'
    }, {
     value: '选项2',
     label: '双皮奶'
    }, {
     value: '选项3',
     label: '蚵仔煎'
    }, {
     value: '选项4',
     label: '龙须面'
    }, {
     value: '选项5',
     label: '北京烤鸭'
    }],
    value: '',
    dialogVisible: false,
    selVal : ''
   }
  },
  methods: {
   currentSel(selVal){
    this.selVal = selVal;
    this.dialogVisible = true;
   }
  }
 }
</script>

环境搭建与组件引入