标签：event 级联 const form data element findItem children

html 代码：

            <el-col :span="10">
              <el-row type="flex" align="middle" >
                <el-col :span="13" class="domain">
                  <el-form-item prop="subject1" label="学科领域">
                    <el-select :value="form.subject1" clearable placeholder="请选择学科领域" class="selsect" @input="changeSubject">
                      <el-option v-for="(item, index) in subjectList" :key="index" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="13" class="subject1">
                  <el-form-item prop="subject2">
                    <el-select v-model="form.subject2" clearable placeholder="请选择学科领域" class="selsect1">
                      <el-option v-for="(item, index) in subjectChildList" :key="index" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

数据初始化 ：

        subjectChildList: [], // 子集
        subjectList: [], // 父集

获取列表数据 ：

      async getSubjectList () {
        const { data } = await getSubjectList()
        if (data.code === 0) {
          this.allSubjectList = data.data.subjects
          const datas = data.data.subjects
          this.subjectList = toTree(datas, "value", "parentId", "children")
        }
      },

当父级变换时：

    // 修改父级subject
      changeSubject (event) {
        if (this.form.subject2 !== event) {
          this.form.subject1 = event
          this.$set(this.form, 'subject2', null)
          const findItem = this.subjectList.find(item => item.value === this.form.subject1)
          if (findItem && findItem.children && findItem.children.length) {
            this.subjectChildList = findItem.children
          } else {
            this.subjectChildList = []
          }
        }
      },

效果：

标签：event,级联,const,form,data,element,findItem,children
来源： https://www.cnblogs.com/guangzhou11/p/13959549.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。