记录一下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变动的值,后面还可以跟其他参数方便使用。
遇到问题暂且记录。方便日后查看。