vue+elementui 动态创建下拉框

<template>
    <div>
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item
                    v-for="(domain, index) in dynamicValidateForm.domains"
                    :label="'站点' + index"
                    :key="domain.id"
            >
                <el-select v-model="domain.id" @change="testSite(domain.id)" placeholder="请选择站点">
                    <el-option
                            v-for="item in testData"
                            :key="item.id"
                            :label="item.testName"
                            :value="item.id"
                            :disabled="item.disabled">
                    </el-option>
                </el-select>
                <el-select placeholder="请选择" filterable v-model="domain.colName" @click.native="colSelClick(domain.id)" style="width: 20%">
                    <el-option
                            style="height: auto"
                            :value="domain.colName">
                        <el-tree :data="domain.children" :props="defaultProps" @node-click="handleNodeClick" node-key="colId"></el-tree>
                    </el-option>
                </el-select>
                <el-button v-if="(dynamicValidateForm.domains.length-1) !== 0" @click.prevent="removeDomain(domain)">删除</el-button>
                <el-button v-if="(dynamicValidateForm.domains.length-1) === index && (dynamicValidateForm.domains.length-1) < (testData.length-1)"
                           @click="addDomain">添加站点</el-button>
                <el-button v-if="(dynamicValidateForm.domains.length-1) === index" type="primary" @click="submitForm('dynamicValidateForm')">测试</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
export default {
    name: "PushManagement",
    data(){
        return {
            dynamicValidateForm: {
                domains: [{
                    colName: '',   // 栏目名称
                    id: null,     // 站点id
                    colId: null, // 栏目id
                    children: [] // 站点下的栏目列表
                }],
            },
            testSiteId: null,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            testData: [{
                testName: '站点一',
                id: 1,
                children: [{
                    name: '栏目一',
                    colId: 11
                },{
                    name: '栏目二',
                    colId: 12,
                    children: [{
                        name: '栏目二 - 子栏目',
                        colId: 121,
                    }]
                }]
            },{
                testName: '站点二',
                id: 2,
                children: [{
                    name: '栏目三',
                    colId: 21
                },{
                    name: '栏目四',
                    colId: 22,
                    children: [{
                        name: '栏目四 - 子栏目',
                        colId: 221,
                    }]
                }]
            },{
                testName: '站点三',
                id: 3,
                children: [{
                    name: '栏目五',
                    colId: 31
                },{
                    name: '栏目六',
                    colId: 32,
                    children: [{
                        name: '栏目六 - 子栏目',
                        colId: 321,
                    }]
                }]
            }],
            // 回显站点 栏目
            echoSiteData: [{
                id: 2,
                colId: 21,
                colName: "栏目三"
            }, {
                id: 3,
                colId: 321,
                colName: "栏目六 - 子栏目"
            }]
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.dynamicValidateForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
                this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)
            }
        },
        addDomain() {
            this.dynamicValidateForm.domains.push({
                colName: '',
                id: null,
                colId: null,
                children: []
            });
        },
        // 栏目点击 绑定栏目对应的站点id
        colSelClick(id){
            // console.log('点击栏目')
            // console.log(id)
            this.testSiteId = id
        },
        // 站点下拉框 改变
        testSite(id){
            this.testSiteId = id
            let testColData = {}
            for(let i = 0; i< this.testData.length; i++){
                if(this.testData[i].id == id){
                    testColData = this.testData[i]
                }
            }
            let data = this.dynamicValidateForm.domains
            for(let i = 0; i < data.length; i++){
                if(data[i].id == testColData.id){
                    data[i].colName = ''
                    data[i].colId = null
                    data[i].children = testColData.children
                }
            }
            // console.log('是否存在站点id')
            // console.log(this.dynamicValidateForm.domains)
            this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)
        },
        // 栏目选择树 改变
        handleNodeClick(data,node,obj) {
            // console.log('下拉框')
            // console.log(data)
            // console.log(this.testSiteId)
            // console.log( this.dynamicValidateForm)
            let arr = this.dynamicValidateForm.domains
            for(let i = 0; i < arr.length; i++){
                if(arr[i].id == this.testSiteId){
                    arr[i].colName = data.name;
                    arr[i].colId = data.colId
                }
            }
        },
        // 站点 禁选
        merOrCityChange(data,data2){ // data 原始数据   data2 站点下拉框--站点 （必须都是数组）
            let arr = []
            if(!data || !data2 || data.length <= 0 || data2.length <= 0)return
            for(let i = 0; i < data.length; i++){
                for(let j = 0; j < data2.length; j++){
                    data[i].disabled = false
                    if(data[i].id == data2[j].id){
                        arr.push(data[i])
                    }
                }
            }
            // console.log('存在的站点id')
            // console.log(arr)
            if(arr.length > 0){
                for(let i = 0; i< data.length; i++){
                    for(let j = 0; j< arr.length;j++){
                        if(data[i].id == arr[j].id){
                            data[i].disabled = true
                        }
                    }
                }
            }
        },
        // 回显 站点栏目
        echoSite(echoSiteData){
            if(echoSiteData.length > 0){
                this.dynamicValidateForm.domains = []
                for(let i = 0; i<this.testData.length; i++){
                    for(let j = 0; j < echoSiteData.length; j++){
                        if(this.testData[i].id === echoSiteData[j].id){
                            this.dynamicValidateForm.domains.push({
                                colName: echoSiteData[j].colName,
                                id: echoSiteData[j].id,
                                colId: echoSiteData[j].colId,
                                children: this.testData[i].children
                            });
                        }
                    }
                }

                this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

            }
        }
    },
    created(){
        this.echoSite(this.echoSiteData)
    },
}
</script>

<style scoped>

</style>