解决遍历多个 el-select, el-cascader 下拉框值相互污染问题

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>