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变动的值,后面还可以跟其他参数方便使用。

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

你可能感兴趣的:(Vue,Element-ui)