v-for="(domain, index) in dynamicValidateForm.domains"

:label="‘站點‘ + index"

:key="domain.id"

>

v-for="item in testData"

:key="item.id"

:label="item.testName"

:value="item.id"

:disabled="item.disabled">

style="height: auto"

:value="domain.colName">

刪除

@click="addDomain">添加站點

測試

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

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)

},

}

總結

以上是生活随笔為你收集整理的vue动态生成下拉框_vue+elementui 动态创建下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。