溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Vue動(dòng)態(tài)數(shù)據(jù)怎么實(shí)現(xiàn)el-select多級(jí)聯(lián)動(dòng)及數(shù)據(jù)回顯”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
父組件
<ProviderCategory v-model="classificationId"></ProviderCategory>
import ProviderCategory from './ProviderCategory'
<script>
import ProviderCategory from './ProviderCategory'
export default {
components: {
ProviderCategory
},
data() {
return {
classificationId:111
}
},
</script>子組件
<template>
<div>
<el-select class="form-width-160" v-for="(item,idx) in selectedListArr.length" :key="idx"
v-model="selectedValueArr[idx]"
@change="(value)=>changeSelectData(value, idx )"
value-key="id"
>
<el-option v-for="item of selectedListArr[idx]"
:key="`${item.id}${idx}`" :label="item.categoryName"
:value="item"></el-option>
</el-select>
</div>
</template><script>
export default {
data () {
return {
classificationList: [],//一級(jí)目錄的數(shù)據(jù)，其實(shí)就是總的數(shù)據(jù)
selectedListArr: [],//二維數(shù)組，每一級(jí)目錄的數(shù)據(jù)存入當(dāng)前下標(biāo)
selectedValueArr: [],//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對(duì)象
}
},
props:{
value : ''
},
created () {
console.log(this.value)//父節(jié)點(diǎn)傳過(guò)來(lái)的數(shù)據(jù)
this.getGoodsCategoryList()//初始化數(shù)據(jù)獲取所有的數(shù)據(jù)
},
methods: {
//this.value如果有數(shù)據(jù)，調(diào)用該方法
findId(arr1,id){//數(shù)據(jù)回顯
var temp = []
var arrId=[];
let newArr=[];
var forFn = function (arr, id) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (item.id === id) {
newArr.unshift(arr);//二維數(shù)組，每一級(jí)目錄的數(shù)據(jù)存入當(dāng)前下標(biāo)
temp.unshift(item);//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對(duì)象
arrId.unshift(id);//選中數(shù)據(jù)的id，包括父id
forFn(arr1, item.pId)
break
} else {
if (item.childNodes) {
forFn(item.childNodes, id)
}
}
}
}
forFn(arr1, id)
this.selectedListArr = newArr;
this.selectedValueArr = temp;
console.log(newArr,"測(cè)試數(shù)據(jù)")
console.log(temp,"數(shù)據(jù)")
console.log(arrId,"id數(shù)據(jù)")
// return temp
},
//加載數(shù)據(jù)
initSelectArr(index){
if(index == 0) {//當(dāng)下標(biāo)為0時(shí)，其實(shí)就是新增的數(shù)據(jù)
this.selectedListArr = [this.classificationList];
this.selectedValueArr=[''];
}else{//否則對(duì)數(shù)據(jù)進(jìn)行處理，
this.selectedListArr = this.selectedListArr.slice(0, index+1);
this.selectedValueArr = this.selectedValueArr.slice(0, index+1);
}
},
//選中數(shù)據(jù)后觸發(fā)的方法
changeSelectData(item, idx) {
console.log(item, idx);
this.initSelectArr(idx);
this.selectedValueArr[idx] = item;
if(item.childNodes && item.childNodes.length>0){
this.selectedListArr.push(item.childNodes);
this.selectedValueArr.push('');
}
},
//初始化數(shù)據(jù)獲取所有的數(shù)據(jù)
getGoodsCategoryList() {
let childNodes = [];//模擬后端傳過(guò)來(lái)的數(shù)據(jù)，在下面
this.classificationList = childNodes;
this.initSelectArr(0);//新增數(shù)據(jù)，頁(yè)面加載
if(this.value && this.value !== ''){
this.findId(this.classificationList , this.value)
}
// this.$http.get('/test/testData', {
// params: {}
// }).then(res => {
// res = res.data
// if (res.code === 200) {
// this.classificationList = res.data.childNodes
// } else {
// this.$message.error(res.msg)
// }
// }).catch(err => {
// console.log(err)
// })
}
}
}
</script>
<style scoped>
</style>//測(cè)試模擬數(shù)據(jù)
childNodes = [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "上衣",
id:2,
pId: 1,
sort: 1,
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖",
haveGoods: true,
id: 5,
pId: 2,
sort: 1,
childNodes:[
{
id:111,
pId: 5,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖褲子",
childNodes: []
},
{
id:122,
pId: 5,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖鞋子",
childNodes: []
}
],
},
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西裝",
haveGoods: false,
id: 6,
pId: 2,
sort: 1,
childNodes:[
{
id:112,
pId: 6,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西裝褲子",
childNodes: []
},
{
id:121,
pId: 6,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西裝鞋子",
childNodes: []
}
],
}
]
},
{
id:11,
pId: 1,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "褲子",
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "牛仔",
haveGoods: true,
id: 112222,
pId: 11,
sort: 1,
childNodes:[],
},
]
},
{
id:12,
pId: 1,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "鞋子",
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "耐克",
haveGoods: true,
id: 1121,
pId: 12,
sort: 1,
childNodes:[
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西牛仔",
haveGoods: true,
id: 11211,
pId: 1121,
sort: 1,
childNodes:[],
},
],
},
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "阿迪",
haveGoods: true,
id: 1122,
pId: 12,
sort: 1,
childNodes:[],
},
]
}
]; //數(shù)據(jù)回顯
findId(arr, id) { //將選中的數(shù)組和id組成一個(gè)數(shù)組
for (let i = 0; i < arr.length; i++) {
if (arr[i].id === id) {
return [
[arr, i]
]
break
}
}
let c = []
arr.forEach((item, i) => {
let r = this.findId(item.childNodes || [], id)
if (r && r.length) {
c = [
[arr, i]
].concat(r)
}
})
// console.log(c,"回顯數(shù)據(jù)")
return c
},<div id="checkbox">
<select v-model="selected" @change='func()'>
<option value='' disabled selected style='display:none;'>選擇1</option>
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<select name="" id="">
<option value='' disabled selected style='display:none;'>選擇2</option>
<option v-for="option in options2" v-bind:value="option.text">
{{ option.text }}
</option>
</select>
</div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#checkbox', data: { selected: '', options: [//一級(jí)菜單 { text: 'A', value: 'A' }, { text: 'B', value: 'B' }, { text: 'C', value: 'C' } ], options2:[],//二級(jí)菜單 }, methods:{ func:function(){//綁定事件，給二級(jí)菜單賦值 switch(this.selected){ case 'A':this.options2=[{text:'A-1'},{text:'A-2'},{text:'A-3'}];break; case 'B':this.options2=[{text:'B-1'},{text:'B-2'},{text:'B-3'}];break; case 'C':this.options2=[{text:'C-1'},{text:'C-2'},{text:'C-3'}];break; } } } }) </script>
“Vue動(dòng)態(tài)數(shù)據(jù)怎么實(shí)現(xiàn)el-select多級(jí)聯(lián)動(dòng)及數(shù)據(jù)回顯”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼