1、问题呈现(以el-cascader为例, el-select同理)
2、解决思路
使用for循环中的key来作为区分标识
3、封装组件(以el-select为例, el-cascader同理)
<template>
<div>
<el-select v-model="school_id" placeholder="请选择学校" @change="schoolChange">
<el-option v-for="item in schools" :label="item.name" :value="item.id" :key="item.index"></el-option>
</el-select>
</div>
</template>
<script>
import API from "@/api/index.js";
export default {
data() {
return {
school_id: '',
schools: []
}
},
props: {
user_id: Number,
change_index: Number, // 区分标识
},
mounted() {
this.getList()
},
methods: {
getList() {
let self = this;
API.jurisdictionSchool(1, 100, self.user_id, 2).then(res => {
self.schools = res.data;
})
},
schoolChange(val) {
let self = this;
self.$emit('schoolChange', {
school_id: val,
change_index: this.change_index
})
},
},
}
</script>
4、页面使用
<template>
<!-- 开通权限 -->
<el-dialog title="开通权限" center :visible.sync="dialogOpenPermission" :close-on-click-modal="false" width="500px"
@close="closePermissionForm">
<el-form :model="openPermissionForm">
<div v-for="(item, index) in openPermissionForm.service" :key="index">
<el-form-item label="选择学校">
<schools :user_id="openPermissionForm.user_id" :change_index='index' @schoolChange="schoolChange">
</schools>
</el-form-item>
<el-form-item label="选择商品">
<el-select v-model="item.product_id" placeholder="选择商品">
<el-option v-for="item in choosableProduct[index].products" :label="item.title" :value="item.id"
:key="item.index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择学生">
<el-select v-model="item.student_id" placeholder="选择学生">
<el-option v-for="item in choosableUser[index].students" :label="item.name" :value="item.id"
:key="item.index">
</el-option>
</el-select>
</el-form-item>
</div>
<el-form-item label="操作">
<el-button type="primary" @click="addopenPermissionForm">添加</el-button>
<el-button type="primary" @click="delopenPermissionForm">删除</el-button>
</el-form-item>
<div class="submit">
<el-form-item>
<el-button type="primary" @click="newOpenPermission">提交</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
</template>
<script>
import API from "@/api/index.js";
import Schools from '@/components/user/schools.vue'
export default {
components: {
Schools
},
data() {
return {
dialogOpenPermission: false, // 开通权限
openPermissionForm: {
user_id: 0,
service: [],
},
change_index: 0,
choosableProduct: [{
products: []
}], // 开通权限--商品
choosableUser: [{
students: []
}], // 开通权限--学生
};
},
methods: {
// 开通权限
handleOpenPermission(row) {
var self = this;
self.openPermissionForm.user_id = row.id;
self.dialogOpenPermission = true;
self.addopenPermissionForm()
},
// 选择学校
schoolChange(data) {
var self = this;
self.openPermissionForm.service[data.change_index].school_id = data.school_id;
// 商品
API.jurisdictionProducts(data.school_id).then((res) => {
self.choosableProduct[data.change_index].products = res;
});
// 学生
API.jurisdictionStudent(self.openPermissionForm.user_id, data.school_id).then((res) => {
self.choosableUser[data.change_index].students = res;
});
},
addopenPermissionForm() {
var self = this;
self.openPermissionForm.service.push({
school_id: '',
product_id: '',
student_id: ''
});
self.choosableProduct.push({
products: []
});
self.choosableUser.push({
students: []
});
},
delopenPermissionForm() {
var self = this;
self.openPermissionForm.service.pop({});
self.choosableProduct.pop({});
self.choosableUser.pop({});
},
closePermissionForm() {
var self = this;
self.delopenPermissionForm()
},
// 提交
newOpenPermission() {
var self = this;
// console.log(self.openPermissionForm);
API.setProduct(self.openPermissionForm).then((res) => {
self.$message.success("提交成功");
self.dialogOpenPermission = false;
self.getData()
});
},
},
};
</script>