Vue使用Cascader級聯選擇器數據回顯會遇到哪些問題？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
使用Cascader級聯選擇器過程中主要存在的應用問題如下：
1、由于在未渲染節點數據的情況下編輯時無法找到對應的類目數據導致無法回顯，如何自動全部加載已選擇類目的相關節點數據；
2、提前加載數據后，點擊相應父級節點出現數據重復等；
3、使用多個數據源相同的級聯選擇器，產生只能成功響應一個加載子級節點數據；
4、Vue中級聯選擇器相應數據完成加載，依然無法回顯。
解決思路
Cascader級聯選擇器在需要回顯的節點數據都存在的情況下，方可完成回顯，首先想到的是把選中節點相關的數據全部獲取到即可，遍歷已選擇的節點數據，遍歷加載相對應的數據。（如果多個級聯選擇器使用同一個數據源，使用深拷貝將數據分開，避免產生影響）
由于是級聯的數據懶加載，需要每一級相應的節點數據加載完進行下一步，故使用ES6中的Promise，將子級節點數據加載封裝成一個Promise，待Promise執行完成，對列表數據遍歷獲取完成后返回即可。
getChildrenList (fid, level = 0) {
return new Promise((resolve, reject) => {
API.getCategory({ fid: fid, level: level }).then(
res => {
if (res) {
if (res.code === 0 && res.result) {
resolve(res.result)
}
}
}
)
})
},
let twolist = this.getChildrenList(codeArr[0], 1)
let thirdlist = this.getChildrenList(codeArr[1], 2)
Promise.all([twolist, thirdlist]).then((data) => {
...
})Vue2的雙向數據綁定使用ES2015中的Object.defineProperty()，該方法無法檢測到Array中的深層數據變化，需要使用$set來觸發列表數據的更新。
一個三級級聯選擇器，首先獲取全部一級類目，二級類目和三級類目采用懶加載，獲取數據的步驟如下:
1、獲取全部一級類目；
2、由于使用異步數據加載，使用Promise進行數據請求；
3、根據已選擇的類目獲取相關聯的二級類目和三級類目；
4、數據請求完成，使用$set觸發列表數據更新，在$nextTick中完成數據你回顯。
相關代碼
<template>
<div>
<el-cascader
placeholder="請選擇所屬類目"
:options="categoryList"
:show-all-levels="false"
v-model="category"
collapse-tags
:props="{
multiple: true,
value: 'code',
label: 'name',
children: 'children',
...props,
}"
/>
<el-cascader
placeholder="請選擇所屬類目"
:options="secondCategoryList"
:show-all-levels="false"
v-model="secondCategory"
collapse-tags
:props="{
multiple: true,
value: 'code',
label: 'name',
children: 'children',
...props,
}"
/>
</div>
</template>
<script>
export default {
data () {
return {
categoryList: [],
category: [],
secondCategoryList: [],
secondCategory: [],
props: {
lazy: true,
// checkStrictly: true, // 父子級節點關聯
async lazyLoad (node, reso) {
const { level, data } = node
if (data && data.children && data.children.length !== 0) {
return reso(node)
}
if (data && data.leaf) {
return reso([])
}
const lv3Code = data ? data.code : null
setTimeout(() => {
lv3Code && API.getCategory({ fid: lv3Code, level: level }).then(
res => {
if (res) {
if (res.code === 0 && res.result) {
const nodes = res.result.map(item => ({ leaf: level === 2, ...item, children: [] }))
data.children = nodes
reso(nodes)
} else {
reso([])
}
}
}
)
}, 500)
}
}
}
},
mounted () {
this.getCategory()
this.initData()
},
methods: {
initData () {
let _that = this
異步獲取編輯數據。。。
.then(result => {
// 此處僅處理result中firstCategory和secondCategory均不為空的情況
let firstTemp = _that.getCategoryListFormat(result.firstCategory, _that.categoryList)
let secondTemp = _that.getCategoryListFormat(result.secondCategory, _that.secondCategoryList)
let promiseArr = [firstTemp, secondTemp].filter(_ => _)
Promise.all(promiseArr).then((formatRes) => {
// 觸發列表數據響應
this.$set(_that.categoryList, formatRes[0].tragetCategoryList)
this.$set(_that.secondCategoryList, formatRes[1].tragetCategoryList)
_that.$nextTick(() => {
// 數據加載完成后，在下一次循環中回顯
_that.category = formatRes[0].category
_that.secondCategory = formatRes[1].category
})
})
})
},
getCategoryListFormat (categorySelectList, tragetCategoryList) {
return new Promise((resolve, reject) => {
const category = []
let flag = 0
let counter = categorySelectList.length
categorySelectList.forEach(v => { // 遍歷已選擇節點數據
const oneNode = v
const twoNode = v.children
const threeNode = v.children.children
const codeArr = [oneNode.code, twoNode.code, threeNode.code]
category.push(codeArr)
twoNode.children = twoNode.children ? twoNode.children : []
let twolist = this.getChildrenList(codeArr[0], 1)
let thirdlist = this.getChildrenList(codeArr[1], 2)
Promise.all([twolist, thirdlist]).then((data) => {
let twochildren = data[0]
let threechildren = data[1]
threechildren = threechildren.map(item => ({ leaf: true, ...item })) // 三級節點設置成葉子節點
twoNode.children = threechildren
tragetCategoryList.forEach(w => { // 遍歷列表添加相應節點數據
if (w.code === oneNode.code) {
if (!w.children) {
w.children = twochildren
}
w.children.forEach(item => {
if (item.code === twoNode.code) {
item.children = twoNode.children
}
})
}
})
flag++
if (flag === counter) {
resolve({ tragetCategoryList, category })
}
})
})
})
},
getChildrenList (fid, level = 0) {
return new Promise((resolve, reject) => {
API.getCategory({ fid: fid, level: level }).then(
res => {
if (res) {
if (res.code === 0 && res.result) {
resolve(res.result)
}
}
}
)
})
},
getCategory(fid = 0, level = 0) {
API.getCategory({ fid: fid, level: level })
.then(
res => {
if (res) {
if (res.code == 0 && res.result) {
this.categoryList = this.deepClone(res.result);
}
}
}
)
},
deepClone (source) { // 深拷貝
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'shallowClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = source[keys].constructor === Array ? [] : {}
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
})
return targetObj
}
}
}
</script>
<style lang="less" scoped>
</style>補充知識：Ant Design 級聯選擇的一種寫法
簡單記錄類似省、市、區或品牌、車系、車型等多級結構，級聯選擇添加并展示的一種寫法：
import React from 'react';
import {Button, Form, message, Row, Tag,Select,Col} from 'antd';
import request from "../../../../utils/request";
const FormItem = Form.Item;
const Option = Select.Option;
class CarSeriesCascader extends React.Component {
constructor(props) {
super(props);
this.state = {
defaultBrandList:[],
selectedCarModelList: props.carModelList ? props.carModelList : [],
brandCode:null,
carModelList:[],
carId:null,
modelCode:null,
modelName:null
}
}
componentDidMount() {
let promise = request(`/car/getBrandList`);
promise.then(result =>{
if(result != null){
this.setState({
defaultBrandList:result
});
}else{
message.error("獲取品牌數據失敗");
}
}).catch(err => {
message.error("獲取品牌數據失敗");
});
// this.setState({
// selectedCarModelList:(this.props.carModelList ? this.props.carModelList : [])
// });
this.handleChange(this.state.selectedCarModelList);
}
getLimitList = (selectedCarModelList) => {
let limitList = selectedCarModelList.map((carModel,index) => {
let limitItem = {};
limitItem.modelName = carModel.modelName;
limitItem.modelCode = carModel.modelCode;
limitItem.carId = carModel.carId;
return limitItem;
});
return limitList;
}
addCarModel = () => {
let addCarModel = {};
let selectedCarModelList = this.state.selectedCarModelList;
// 選中車型號
if (this.state.carId !== null) {
// 檢查車型是否已選中
for (let index = this.state.selectedCarModelList.length - 1; index >= 0; index--) {
let carModel = this.state.selectedCarModelList[index];
if (carModel.carId == this.state.carId) {
message.error("車型已在已選車型中");
return;
}
}
addCarModel.carId = this.state.carId;
addCarModel.modelCode = this.state.modelCode;
addCarModel.modelName = this.state.modelName;
selectedCarModelList.push(addCarModel);
} else {
return;
}
this.handleChange(selectedCarModelList);
this.setState({
selectedCarModelList
});
}
handleChange = (selectedCarModelList) => {
if (this.props.onChange) {
let limitList = this.getLimitList(selectedCarModelList);
this.props.onChange(limitList);
}
}
deleteTag = (limitCode) => {
debugger
let selectedCarModelList = this.state.selectedCarModelList;
selectedCarModelList = selectedCarModelList.filter(carModel => !(carModel.modelCode === limitCode));
this.handleChange(selectedCarModelList);
this.setState({selectedCarModelList});
}
//品牌變化
brandChange = (brandName) => {
this.state.defaultBrandList.map((item, index) => {
if (item.brandName == brandName) {
let promise = request(`/car/getModelList?brandCode=` + item.brandCode);
promise.then(result =>{
if(result != null){
this.setState({
brandCode:item.brandCode,
carModelList:result
});
}else{
message.error("獲取車型數據失敗");
}
}).catch(err => {
message.error("獲取車型數據失敗:");
});
}
});
}
//車型變化
modelChange = (modelName) => {
this.props.form.setFieldsValue({modelName: null});
let _this = this;
this.state.carModelList.map((item, index) => {
if (item.modelName == modelName) {
console.log(item);
this.setState({
modelCode : item.modelCode,
carId : item.carId,
modelName : item.modelName
});
}
});
}
render() {
const {getFieldDecorator} = this.props.form;
//品牌名稱列表
let allBrandListOption = this.state.defaultBrandList != null ? this.state.defaultBrandList.map((item, index) => {
return <Option value={item.brandName} key={index}>{item.brandName}</Option>;
}) : null;
//車型名稱列表
let allModelListOption = this.state.carModelList != null ? this.state.carModelList.map((item, index) => {
return <Option value={item.modelName} key={index}>{item.modelName}</Option>;
}) : null;
const {
closable=true,
} = this.props;
const existCarModel = [];
const limitList = this.getLimitList(this.state.selectedCarModelList);
for (let index = limitList.length - 1; index >= 0; index--) {
let limitItem = limitList[index];
existCarModel.push(<Tag
key={limitItem.modelCode}
closable={closable}
onClose={(e) => {
e.preventDefault();
this.deleteTag(limitItem.modelCode);
}}
>{limitItem.modelName}</Tag>);
}
return (
<div>
<Row>
<FormItem >
{getFieldDecorator('brandName', {
rules: [{
message: '請選擇品牌'
}],
})(
<Select
placeholder="品牌"
dropdownMatchSelectWidth={false}
onChange={this.brandChange}
style={{ marginRight: 10, width: 100 }}>
<Option value={null}>選擇品牌</Option>
{allBrandListOption}
</Select>
)}
{getFieldDecorator('modelName', {
rules: [{
message: '請選擇車型'
}],
})(
<Select
placeholder="車型"
dropdownMatchSelectWidth={false}
onChange={this.modelChange}
style={{ marginRight: 10, width: 260 }}>
<Option value={null}>選擇車型</Option>
{allModelListOption}
</Select>
)}
<Button type={"primary"} icon={"plus"} onClick={this.addCarModel}>添加車型</Button>
</FormItem>
</Row>
<Row>
{existCarModel}
</Row>
</div>
)
}
}
export default Form.create()(CarSeriesCascader);看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
