Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式
更新時間：2022年07月26日 09:03:37 作者：Mr_Debugger
這篇文章主要介紹了Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)數(shù)據(jù) el-select 多級聯(lián)動、數(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: [],//一級目錄的數(shù)據(jù)，其實就是總的數(shù)據(jù)
? ? ? ? ? ? ? ? selectedListArr: [],//二維數(shù)組，每一級目錄的數(shù)據(jù)存入當前下標
? ? ? ? ? ? ? ? selectedValueArr: [],//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對象
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? value : ''
? ? ? ? },
? ? ? ? created () {
? ? ? ? ? ? console.log(this.value)//父節(jié)點傳過來的數(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ù)組，每一級目錄的數(shù)據(jù)存入當前下標
? ? ? ? ? ? ? ? ? ? ? ? ? ? temp.unshift(item);//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對象
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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,"測試數(shù)據(jù)")
? ? ? ? ? ? ? ? console.log(temp,"數(shù)據(jù)")
? ? ? ? ? ? ? ? console.log(arrId,"id數(shù)據(jù)")
? ? ? ? ? ? ? ? // return temp
? ? ? ? ? ? },
? ? ? ? ? ? //加載數(shù)據(jù)
? ? ? ? ? ? initSelectArr(index){
? ? ? ? ? ? ? ? if(index == 0) {//當下標為0時，其實就是新增的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? this.selectedListArr = [this.classificationList];
? ? ? ? ? ? ? ? ? ? this.selectedValueArr=[''];
? ? ? ? ? ? ? ? }else{//否則對數(shù)據(jù)進行處理，
? ? ? ? ? ? ? ? ? ? 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 = [];//模擬后端傳過來的數(shù)據(jù)，在下面
? ? ? ? ? ? ? ? this.classificationList = childNodes;
? ? ? ? ? ? ? ? this.initSelectArr(0);//新增數(shù)據(jù)，頁面加載
? ? ? ? ? ? ? ? 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>//測試模擬數(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組成一個數(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
},多級聯(lián)動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: [//一級菜單
{ text: 'A', value: 'A' },
{ text: 'B', value: 'B' },
{ text: 'C', value: 'C' }
],
options2:[],//二級菜單
},
methods:{
func:function(){//綁定事件，給二級菜單賦值
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>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js踩坑之ref引用細節(jié)點講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue從零實現(xiàn)一個消息通知組件的方法,結(jié)合實例形式分析了vue實現(xiàn)消息通知組件的具體原理、實現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue 添加和編輯用同一個表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue項目中swiper輪播active圖片實現(xiàn)居中并放大
這篇文章主要介紹了vue項目中swiper輪播active圖片實現(xiàn)居中并放大方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05