el-select选择框里面 根据后台返回的字段 1、2 来匹配选择框里面的内容 :value

15 篇文章 0 订阅

正文里面person.vue

	<el-form-item label="权限" :label-width="formLabelWidth" prop="newRoleId">
      <el-select v-model="formedit.newRoleId" placeholder="请选择权限">
        <el-option label="超级管理员" :value="1"></el-option>
        <el-option label="管理员" :value="2"></el-option>
      </el-select>
    </el-form-item>

js部分

		 // 人员编辑
premisesEdit(item) {
  this.formedit = {
    newName: item.name,
    newPhone: item.phone,
    newRoleId: item.roleId,
    userId: item.userId
  };
  // if (item.roleId == 1) {
  //   this.formedit.newRoleId = "超级管理员";
  // } else if (item.roleId == 2) {
  //   this.formedit.newRoleId = "管理员";
  // } else {
  //   this.formedit.newRoleId = "普通人员";
  // }
  this.editPeploe = true;
},

注明:原来是靠这部分来获取后端返回的1、2来判断 并填充选择框的内容,但有问题的是,调接口要提交的参数是1、2,所以我这样转换了,提交参数的时候是提交的“超级管理员”或者“管理员”字段为string格式,并不是后端需要的1、2

			// if (item.roleId == 1) {
	      //   this.formedit.newRoleId = "超级管理员";
	      // } else if (item.roleId == 2) {
	      //   this.formedit.newRoleId = "管理员";
	      // } else {
	      //   this.formedit.newRoleId = "普通人员";
	      // }

所以通过:value="2"的方式 自动匹配 寻找后台返回的1、2,并填充内容string,并且提交参数的时候也是1、2,省时省力省脑子!

	在同一个vue文件中可以不封装的一种方法如下:

template中

			<span class="el-dropdown-link">
                    {{currentUser.realName || '--'}}·{{currentUser.roleId | ROLEID}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>

	export default {
		watch{
			...........
		},
		filters:{
	      ROLEID(val){
	        if(val == 1){
	          return '超级管理员'
	        }else if(val == 2){
	          return '管理员'
	        }else if(val == 3){
	          return '普通人员'
	       	 }
	     	 }
	 	   },
	}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值