vue使用el-select下拉框匹配不到值的问题及解决
作者：铁锤妹妹@
这篇文章主要介绍了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, '')
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。