el-select 的 @change 事件

<el-form-item label="项目名称" prop="project_id" :rules="{ required: true, message: '请选择项目', trigger: 'blur' }">
    <el-select v-model="form.project_id" filterable placeholder="请选择" @change="changeSelectedProject">
        <el-option
                v-for="item in projects"
                :key="item.id"
                :label="projectNameFormatter(item)"
                :value="item.id">
        </el-option>
    </el-select>
</el-form-item>

@change="changeSelectedProject" 选中后，默认值为 <el-option> 中的 :value 的值，只会获取到一个 id 值，事件中可以通过 id 进行匹配对应的值

changeSelectedProject(id) {
    this.selected_project = this.projects.find((item) => {
        return item.id == id;
    });
}

如果 projects 的数据源，来源两张不同的表合并形成，则会出现 id 值相同的情况，在进行选择时，拿到的结果与预期结果不一致

在这里使用 el-option 的 label 值进行辅助查询当前选中的项目，在 el-select 上添加 ref 属性：

<el-select v-model="form.project_id" filterable placeholder="请选择" ref="project_list" @change="changeSelectedProject">

@change 事件中获取 label：

changeSelectedProject(val) {
    Vue.nextTick(() => {
        // 获取选中 `el-option` 的 `label` 值
        let label = this.$refs.project_list.selectedLabel;
        
        this.selected_project = this.projects.find((item) => {
            return item.id == val && item.name == label;
        });
    });
}