列子
<template>
<div>
<button @click="addGroup">添加</button>
<button @click="submit">提交</button>
<div v-for="(item,index) in groupList" :key="index">
<select v-model="item.select1.username">
<option v-for="o in item.select1.options" :value="o.id" :key="o.id">{{o.value}}</option>
</select>
<select v-model="item.select2.username">
<option v-for="o in item.select2.options" :value="o.id" :key="o.id">{{o.value}}</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: "Demo",
data() {
return {
groupList: [
{
select1: {
username: '',
options: [
{id: 1, value: "aaa"},
{id: 2, value: "bbb"},
{id: 3, value: "ccc"}
]
},
select2: {
username: '',
options: [
{id: 1, value: 1},
{id: 2, value: 2},
{id: 3, value: 3}
]
},
},
]
}
},
methods: {
addGroup() {
let group = {
select1: {
username: '',
options: [
{id: 1, value: "aaa"},
{id: 2, value: "bbb"},
{id: 3, value: "ccc"}
]
},
select2: {
username: '',
options: [
{id: 1, value: 1},
{id: 2, value: 2},
{id: 3, value: 3}
]
},
};
this.groupList.push(group);
},
submit() {
console.log(this.groupList)
}
},
}
</script>
<style scoped>
</style>
实战
<tr>
<td>
<div style="text-align: right;">
<button class="btn btn-xs btn-success" ng-click="addCategoryGroup();"><strong>ADD CATEGORY</strong></button><hr>
</div>
<div id="sticker_category">
<div ng-repeat="each in stickerCategoryList">
<button class="btn btn-xs btn-success" ng-click="removeCategoryGroup(each);"><strong>DEL</strong></button>
<select id="select1CheckId" ng-model="each.select1.checkId" style="width: 140px" ng-change="showSelect1(each.select1.checkId.id,each)" ng-options="item.title for item in each.select1.options">
</select>
<select id="select2CheckId" ng-model="each.select2.checkId" style="width: 140px" ng-change="showSelect2(each.select2.checkId.id,each)" ng-options="item.title for item in each.select2.options">
</select>
<select id="select3CheckId" ng-model="each.select3.checkId" style="width: 140px" ng-change="showSelect3(each.select3.checkId.id,each)" ng-options="item.title for item in each.select3.options">
</select>
<select id="select4CheckId" ng-model="each.select4.checkId" style="width: 140px" ng-change="showSelect4(each.select4.checkId.id,each)" ng-options="item.title for item in each.select4.options">
</select>
</div>
</div>
</td>
</tr>
$scope.addCategoryGroup = controller.addCategoryGroup;
$scope.removeCategoryGroup = controller.removeCategoryGroup;
$scope.stickerCategoryList = [
{
select1:{
checkId:null,
id:'',
options:[]
},
select2:{
checkId:null,
id:'',
options:[]
},
select3:{
checkId:null,
id:'',
options:[]
},
select4:{
checkId:null,
id:'',
options:[]
},
endId:''
}
];
$scope.showSelect1 = controller.showSelect1;
$scope.showSelect2 = controller.showSelect2;
$scope.showSelect3 = controller.showSelect3;
$scope.showSelect4 = controller.showSelect4;
//增加
App.StickerDetailController.addCategoryGroup = function() {
// let options = this.stickerCategoryList.select1.options;
let group = {
select1:{
checkId:null,
id:'',
options:[]
},
select2:{
checkId:null,
id:'',
options:[]
},
select3:{
checkId:null,
id:'',
options:[]
},
select4:{
checkId:null,
id:'',
options:[]
}
};
this.stickerCategoryList.push(group);
};
//删除
App.StickerDetailController.removeCategoryGroup = function(item) {
this.stickerCategoryList.splice(this.stickerCategoryList.indexOf(item),1);
};
//查询树节点
findTreeArr = function(treeArr, id) {
var isGet = false;
var retNode = null;
function deepSearch(treeArr, id) {
for (var i = 0; i < treeArr.length; i++) {
if (treeArr[i].childCategories && treeArr[i].childCategories.length > 0) {
deepSearch(treeArr[i].childCategories, id);
}
if (id === treeArr[i].id || isGet) {
isGet || (retNode = treeArr[i]);
isGet = true;
break;
}
}
}
deepSearch(treeArr, id);
return retNode;
};
App.StickerDetailController.showSelect1 = function(id,group) {
if (!id) {
group.select2.options = [];
group.select3.options = [];
group.select4.options = [];
group.select2.checkId = '';
group.select3.checkId = '';
group.select4.checkId = '';
group.select1.id = '';
group.select2.id = '';
group.select3.id = '';
group.select4.id = '';
} else {
group.endId = id;
group.select1.id = id;
group.select2.id = '';
group.select3.id = '';
group.select4.id = '';
group.select2.options = [];
group.select3.options = [];
group.select4.options = [];
group.select2.checkId = '';
group.select3.checkId = '';
group.select4.checkId = '';
let select2Options = this.findTreeArr(this.treeData,id);
group.select2.options = select2Options.childCategories;
}
};
App.StickerDetailController.showSelect2 = function(id,group) {
if (!id) {
group.select3.options = [];
group.select4.options = [];
group.select3.checkId = '';
group.select4.checkId = '';
group.select2.id = '';
group.select3.id = '';
group.select4.id = '';
} else {
group.endId = id;
group.select2.id = id;
group.select3.id = '';
group.select4.id = '';
group.select3.options = [];
group.select4.options = [];
group.select3.checkId = '';
group.select4.checkId = '';
let select3Options = this.findTreeArr(this.treeData,id);
group.select3.options = select3Options.childCategories;
}
};
App.StickerDetailController.showSelect3 = function(id,group) {
if (!id) {
group.select4.options = [];
group.select4.checkId = '';
group.select3.id = '';
group.select4.id = '';
} else {
group.endId = id;
group.select3.id = id;
group.select4.id = '';
group.select4.options = [];
group.select4.checkId = '';
let select4Options = this.findTreeArr(this.treeData,id);
group.select4.options = select4Options.childCategories;
}
};
App.StickerDetailController.showSelect4 = function(id,group) {
if (!id) {
group.select4.id = '';
} else {
group.endId = id;
group.select4.id = id;
}
};
网友评论