首页 > 其他分享 >Elementui多选下拉框数据回显

Elementui多选下拉框数据回显

时间:2022-11-27 21:12:14浏览次数:41  
标签:医疗保险 回显 Elementui older value label 下拉框

今天在做老年病项目时发现需要用大量的单选框,但是单选框显示比较乱,所以我这次用了多选下拉框。

环境:Vue3+ElementUI-Plus

首先是基本的多选显示下拉框

<el-form-item label="费用支付">
              <el-select v-model="older.feePayment" multiple placeholder="费用支付" clearable class="w100">
                <el-option  v-for="item in feePaymentArr"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label">
                </el-option>
              </el-select>
            </el-form-item>

这里的v-model绑定的是这个下拉框选中值的数组

这里的feePaymengArr数组是下拉框所有的数据

 methods:{
    //修改老人信息
    handleEdit(index,row) {
      console.log(index,row)
      this.older = JSON.parse(JSON.stringify(row))
      console.log(this.older)
      this.older.feePayment = this.older.feePayment.split(",")
      this.feePaymentArr= [
        {value: '城镇职工基本医疗保险',label: '城镇职工基本医疗保险'},
        {value: '城镇居民基本医疗保险',label: '城镇居民基本医疗保险'},
        {value: '新型农村合作医疗',label: '新型农村合作医疗'},
        {value: '贫困救助',label: '贫困救助'},
        {value: '商业医疗保险',label: '商业医疗保险'},
        {value: '商业医疗保险',label: '商业医疗保险'},
        {value: '全公费',label: '全公费'},
        {value: '全自费',label: '全自费'},
        {value: '其他',label: '其他'},
      ]
      this.infoDialog = true
    },
}
data(){
return{
 older:{
        feePayment : [] ,         //贫困救助
      },
      //下拉框数组
      feePaymentArr : []
}
}

 

这个是在elementui表格的基础上做的,所以编辑方法会自动获取这一行的值,然后我们数据库关于多选字段值是以,分隔的,所以我们的回显数据需要通过split方法进行分割成一个数组,然后下拉框的v-model绑定这个数组,elementui就会帮我们自动进行数据的回显。

 

标签:医疗保险,回显,Elementui,older,value,label,下拉框
From: https://www.cnblogs.com/wjingbo/p/16930655.html

相关文章