vue 2.0 element-ui 에서 el-select 선택 기 는 선택 한 내용 을 표시 할 수 없습니다(해결 방법)
select.vue 파일
<template>
<div>
<div class="row" v-for="RowItem in rows">
<div class="col" v-for="colItem in RowItem.configVos">
<el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode,formData[colItem.paramCode])">
<el-option v-for="option in colItem.configOptions" :label="option.optionCode"
:value="option.optionValue" >
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
groupItem:{},
formData:{},
rows:'',
cols:''
}
},
watch:{
},
methods:{
getfordata:function(){
var _this = this;
axios.get('../json/selectdata.json')
.then(function(res){
_this.groupItem = res.data;
var row = _this.groupItem[0].rowData;
_this.rows = row;
for(var i=0;i<row.length;i++){
var col = row[i].configVos;
for(var j=0;j<col.length;j++){
var key = col[j];
_this.formData[key.paramCode] = '';
}
}
})
},
onSelectChange:function(key,val){
console.log(val);
},
getModel(model) {
console.log(model);
}
},
created:function(){
this.getfordata();
}
}
</script>
<style scoped>
.col{
float:left;
}
.row{
width:800px;
height:100px;
}
</style>
selectdata.json 파일 선택
[
{
"groupName": " ",
"rowData": [
{
"configVos": [
{
"configOptions": [
{
"id": "D",
"optionCode": " ",
"optionValue": "0",
"paramId": "4"
},
{
"id": "5",
"optionCode": " ",
"optionValue": "1",
"paramId": "4"
}
],
"id": "4E",
"paramCode": "isView",
"paramValue": "0"
},
{
"configOptions": [
{
"id": "4",
"optionCode": " ",
"optionValue": "0",
"paramId": "4"
},
{
"id": "4",
"optionCode": " ",
"optionValue": "1",
"paramId": "44"
}
],
"id": "24",
"paramCode": "isDeleteCbnd",
"paramValue": "1"
}
]
},
{
"configVos": [
{
"configOptions": [
{
"id": "EF",
"optionCode": " 2.5",
"optionValue": "0",
"paramId": "1"
},
{
"id": "8B",
"optionCode": " 2.5+qd",
"optionValue": "1",
"paramId": "131"
},
{
"id": "06",
"optionCode": " 2.5",
"optionValue": "2",
"paramId": "1"
},
{
"id": "25BF",
"optionCode": " 4.5",
"optionValue": "3",
"paramId": "31"
}
],
"id": "31",
"paramCode": "converType",
"paramValue": "0"
},
{
"configOptions": [
{
"id": "1366",
"optionCode": " ",
"optionValue": "0",
"paramId": "98"
},
{
"id": "EC",
"optionCode": " ",
"optionValue": "1",
"paramId": "8"
}
],
"id": "91F8",
"paramCode": "zxDataSource",
"paramValue": "0"
}
]
},
{
"configVos": [
{
"configOptions": [
{
"id": "CD",
"optionCode": " ",
"optionValue": "HS",
"paramId": "5C"
},
{
"id": "91508011",
"optionCode": " ",
"optionValue": "YYS",
"paramId": "91C"
}
],
"id": "5C",
"paramCode": "derivativeDataSource",
"paramValue": "HS"
}
]
}
]
}
]
나중에 Vue 문 서 를 보 러 갔 는데 문서 에나 는 단지 아래 의 녹색 문장 을 위 에 있 는 빨간색 문장 으로 바 꾸 었 으 면 좋 겠 다.
총결산
위 에서 말 한 것 은 편집장 이 소개 한 vue 2.0 element-ui 에서 el-select 선택 기 는 선택 한 내용 을 표시 할 수 없습니다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.