vue使用el-select下拉框匹配不到值的问题及解决

 更新时间:2023年05月20日 10:51:51   作者:铁锤妹妹@  
这篇文章主要介绍了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, '')
      }
    }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 2.0 购物车小球抛物线的示例代码

    vue 2.0 购物车小球抛物线的示例代码

    本篇文章主要介绍了vue 2.0 购物车小球抛物线的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 关于element-ui中el-form自定义验证(调用后端接口)

    关于element-ui中el-form自定义验证(调用后端接口)

    这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue实现按钮旋转和移动位置的实例代码

    Vue实现按钮旋转和移动位置的实例代码

    这篇文章主要介绍了Vue实现按钮旋转和移动位置的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • element select实现组件虚拟滚动优化

    element select实现组件虚拟滚动优化

    本文主要介绍了element select实现组件虚拟滚动优化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue实现下拉框的多选功能(附后端处理参数)

    vue实现下拉框的多选功能(附后端处理参数)

    本文介绍了如何使用Vue实现下拉框的多选功能,实现了在选择框中选择多个选项的功能,文章详细介绍了实现步骤和示例代码,对于想要了解如何使用Vue实现下拉框多选功能的读者具有一定的参考价值
    2023-08-08
  • vue中使用vue-qriously插件生成二维码

    vue中使用vue-qriously插件生成二维码

    集成vue-cli脚手架里面的二维码插件貌似很多,一般都会满足大部分需求,这次就讲一下插件vue-qriously生成二维码效果,感兴趣的朋友一起看看吧
    2022-04-04
  • vueScroll实现移动端下拉刷新、上拉加载

    vueScroll实现移动端下拉刷新、上拉加载

    这篇文章主要介绍了vueScroll实现移动端下拉刷新、上拉加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    这篇文章主要介绍了解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 解决vue cli使用typescript后打包巨慢的问题

    解决vue cli使用typescript后打包巨慢的问题

    这篇文章主要介绍了解决vue cli使用typescript后打包巨慢的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    本文主要介绍了Vue3+Element-Plus实现左侧菜单折叠与展开功能示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论