Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式
更新時(shí)間：2022年07月26日 09:03:37 作者：Mr_Debugger
這篇文章主要介紹了Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
動(dòng)態(tài)數(shù)據(jù) el-select 多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯
父組件
<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
},多級(jí)聯(lián)動(dòng)select菜單（易懂）
<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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng)的代碼示例
- vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)
- Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
- vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果
- vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
相關(guān)文章
vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼
這篇文章主要介紹了vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
本文主要介紹了nuxt3中server routes的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
preload對(duì)比prefetch的功能區(qū)別詳解
這篇文章主要為大家介紹了preload對(duì)比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能,需要的朋友可以參考下2017-06-06
Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case（短橫線）命名法和使用大駝峰的區(qū)別,通過(guò)實(shí)例可以看出如果是在html中使用組件，那么就不能用大駝峰式寫法，如果是在.vue?文件中就可以，需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue.js中指令Directives，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue自定義表單生成器,可根據(jù)json參數(shù)動(dòng)態(tài)生成表單,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
在 Vue Router 中,你可以使用滾動(dòng)行為來(lái)定義路由切換時(shí)頁(yè)面滾動(dòng)的行為,本文就詳細(xì)的介紹一下Vue-Router滾動(dòng)行為的具體使用,感興趣的可以了解一下2023-08-08