el-cascader 懒加载 回显数据
作者:互联网
<template> <div class='dashboard-container'> <el-cascader ref='cascader' v-model='cascaderValue' v-loading='loading' :disabled='disabled' :props='props' :title='selStr' clearable element-loading-spinner='el-icon-loading' placeholder='请选择' @change='handleChange($event)' /> </div> </template> <script> import { getAddressCity, getAddressDistrict, getAddressProvince } from '@/api/common' export default { name: 'index', data() { return { cascaderValue: [], selArr: [], selStr: '', loading: false, loadignArr: [true, true, true], props: { lazy: true, lazyLoad: this.lazyLoad } } }, props: { value: { Type: Object }, disabled: { default: false } }, watch: { value: { handler(val) { if (val) { console.log(val, this.value) this.lazyLoad() this.cascaderValue = this.value } }, immediate: true }, loadignArr: { handler(val) { console.log(val, 'loaingArr') const result = val.includes(true) if (result) { this.loading = true } else { this.loading = false } } } }, created() { }, methods: { handleChange(event) { console.log(event) console.log(this.$refs.cascader.getCheckedNodes()) const selNode = this.$refs.cascader.getCheckedNodes() const selVal = selNode[0] this.getSelValue(selVal) this.$nextTick(() => { this.$emit('getSelArr', this.selArr) }) }, getSelValue(val) { console.log(val.label) if (val.parent) { this.getSelValue(val.parent) } const s = this.selStr ? '/' : '' this.selStr = this.selStr + s + val.label this.selArr.push({ name: val.label, id: val.value, levle: val.levle }) }, // lazyLoad(node, resolve) { setTimeout(() => { console.log(node.level) if (node.level == 0) { this.getProvence(node, resolve) } if (node.level == 1) { this.getCity(node, resolve) } if (node.level == 2) { this.getDistrict(node, resolve) } }, 100) }, getProvence(node, resolve) { this.$set(this.loadignArr, 0, true) getAddressProvince().then((res) => { console.log(res) if (Array.isArray(res.data)) { const nodes = res.data.map(item => ({ value: item.provinceCode, // // value: item.dwdm, label: item.provinceName, leaf: node.level >= 2//层级 })) resolve(nodes) } }).catch(error => this.$message.error(error)).finally(() => { this.$set(this.loadignArr, 0, false) }) }, getCity(node, resolve) { this.$set(this.loadignArr, 1, true) getAddressCity(node.value).then((res) => { if (Array.isArray(res.data)) { const nodes = res.data.map(item => ({ value: item.cityCode, // // value: item.dwdm, label: item.cityName, leaf: node.level >= 2//层级 })) resolve(nodes) } }).catch(error => this.$message.error(error)).finally(() => { this.$set(this.loadignArr, 1, false) }) }, getDistrict(node, resolve) { this.$set(this.loadignArr, 2, true) getAddressDistrict(node.value).then((res) => { if (Array.isArray(res.data)) { const nodes = res.data.map(item => ({ value: item.districtCode, // // value: item.dwdm, label: item.districtName, leaf: node.level >= 2//层级 })) resolve(nodes) } }).catch(error => this.$message.error(error)).finally(() => { this.$set(this.loadignArr, 2, false) }) } } } </script> <style lang='less' scoped> .el-cascader { line-height: 34px; } </style>
标签:node,el,resolve,回显,val,res,value,item,cascader 来源: https://www.cnblogs.com/orzzt/p/15848846.html