Vue Element-ui下拉使用

记录一下element-ui的下拉框灵活用法

//页面代码   这个是table里面的下拉
<template slot-scope="scope">
	   <el-select v-model="ruleId" placeholder="请选择" clearable
	                                 @change="finldSource($event,scope.row)">
	                          <el-option v-for="items in scope.row.evationRuleBVOList" :key="items.value" :label="items.label" :value="items.value"></el-option>
	  </el-select>
 </template>
// 下拉框赋值
//spEvationUserScoreVO集合里面有evationRuleBVOList集合(这个集合里面的数据是下拉框所需要的)
for(var i=0; i<result.spEvationUserScoreVO.length; i++){
            let evationRuleBVOs = result.spEvationUserScoreVO[i].evationRuleBVOList;
            for(var j=0; j<evationRuleBVOs.length; j++){
              if(util.StringNotBlank(evationRuleBVOs[j].evationLabel)){
                result.spEvationUserScoreVO[i].evationRuleBVOList[j] = {label: evationRuleBVOs[j].evationLabel + "("+evationRuleBVOs[j].evationScore+"分)", value: evationRuleBVOs[j].id};
              } else {
                result.spEvationUserScoreVO[i].evationRuleBVOList[j].length = 0;
              }
            }
          }

主要是把从后端返回来的数据集合evationRuleBVOList当作的options来使用,重新把品拼接的数据放入集合让集合变为下拉框选项。
在table里面使用下拉框,而且每行下拉框的数据还不一样需要用到插槽,插槽在table里面可以取到table的当前行数据。
当使用change事件有需要别的参数可以使用$event,不仅获取change变动的值,后面还可以跟其他参数方便使用。

遇到问题暂且记录。方便日后查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值