vue使用el-select下拉框匹配不到值的问题及解决
使用el-select下拉框匹配不到值的问题
问题描述
点击编辑弹窗里从上面列表行数据里取到的乙方名称变成了乙方id15,产生的原因是因为弹窗里的甲乙方列表是从接口请求来的,比如后期某个乙方公司关停了,这条数据就会被删除,导致我们取不到这条数据
查看接口返回的列表,发现少了行数据中的乙方这条数据
解决思路
1.findIndex() 返回值判断编辑当前行数据取到的id和甲乙方列表里的id是否有一样的; 如果有相同id的话,返回第一个符合条件的数组成员位置,都不符合条件,则返回 -1
2.如果返回数组成员位置 < 0 的话,从列表行数据取id和name值,创建一条被删除这条数据的新对象;push进数组的最后一条,这样就不存在id取不到的情况了
解决方法
<el-form-item v-if="showPartner === '1'" label="甲方"> <el-select v-model="partnerForm.partner_id_a" filterable> <el-option v-for="(val, key) in partnerAList" :key="key" :label="val.partner_name" :value="val.id" /> </el-select> </el-form-item> <el-form-item v-if="showPartner === '1'" label="乙方"> <el-select v-model="partnerForm.partner_id_b" filterable> <el-option v-for="(val, key) in partnerBList" :key="key" :label="val.partner_name" :value="val.id" /> </el-select> </el-form-item>
setup(props, { emit }) { const partnerAList = ref<any[]>([]) const partnerBList = ref<any[]>([]) const showPartner = ref<string>('0') const dataMap = reactive({ partnerForm: { phone: '', partner_id_a: '0', partner_id_b: '0', username: '', remark: '', status: '' } }) const { onSubmit, close, formNode, subLoading } = useForm({ type: props.type, emit: emit, editApi: partnerApi['EDITPARTNERUSER'], addApi: partnerApi['ADDPARTNERUSER'], form: dataMap.partnerForm }) function getPartnerAList() { partnerApi['GETPARTNERALIST']().then((res: any) => { if (res.data.code === '20000') { partnerAList.value = res.data.data var tempObj = { id: '0', partner_name: '请选择' } partnerAList.value.unshift(tempObj) const temp = res.data.data.findIndex((item:any) => { return item.id === props.info['partner_id_a'] }) if (temp < 0) { const presentObj = { id: props.info['partner_id_a'], partner_name: props.info['party_a_name'] } partnerAList.value.push(presentObj) } } }) } function getPartnerBList() { partnerApi['GETPARTNERBLIST']().then((res: any) => { if (res.data.code === '20000') { partnerBList.value = res.data.data var tempObj = { id: '0', partner_name: '请选择' } partnerBList.value.unshift(tempObj) const temp = res.data.data.findIndex((item:any) => { return item.id === props.info['partner_id_b'] }) if (temp < 0) { const presentObj = { id: props.info['partner_id_b'], partner_name: props.info['party_b_name'] } partnerBList.value.push(presentObj) } } }) } onMounted(() => { getPartnerAList() getPartnerBList() }) return { formNode, ...toRefs(dataMap), partnerFormRules, onSubmit, close, subLoading, partnerAList, partnerBList, showPartner, onSubmitForm } }
el-select下拉框,选择后赋值成功,但是框上不显示选中的值的解决
最近在做项目时发现el-select下拉框,选择后赋值成功,但是框上不显示选中的值。
后来查了下官方文档之后发现原因:
vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值。
如上图所示,操作人下拉框初始没有值,选择了操作班组之后,根据所选的班组去获取后台数据填充操作人下拉框。
然后就发现了问题:选择了操作人之后输入框还是没有值,但是绑定的@change事件currOperatorChange 打印出了选中的值。
解决方法:用 $set 来赋值
如下所示:
<el-row> <el-col :span="12"> <el-form-item prop="deptId" :label="$t('taskManage.lockTask.deptId')+':'"> <treeselect :placeholder="$t('taskManage.lockTask.selDeptId')" :options="deptTree" :normalizer="normalizer" v-model="formData.deptId" @select="selectDepart"> </treeselect> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="operateId" :label="$t('taskManage.lockTask.table.operateName')+':'"> <el-select clearable v-model="formData.operateId" @change="currOperatorChange" :placeholder="$t('taskManage.lockTask.selOperateName')"> <el-option v-for="item in operateOption" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> </el-row>
// 操作人选中项发生变化 currOperatorChange(val) { console.log('操作人选中项发生变化', val) if (val) { let obj = {} obj = this.operateOption.find(item => { //这里的operateOption就是上面遍历的数据源 return item.value === val //筛选出匹配数据 }) this.$set(this.formData, this.formData.operateId, val.value) this.formData.operateName = obj.label console.log('修改操作人名称', obj.label, obj.value) } else { this.formData.operateName = '' this.$set(this.formData, this.formData.operateId, '') } }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
关于element-ui中el-form自定义验证(调用后端接口)
这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
这篇文章主要介绍了解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
本文主要介绍了Vue3+Element-Plus实现左侧菜单折叠与展开功能示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-04-04
最新评论