使用element中el-cascader级联选择器动态懒加载以及回显（单选）

本文主要是介绍使用element中el-cascader级联选择器动态懒加载以及回显（单选），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><!-- 新增||修改弹框 --><el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="open"width="800px" append-to-body><el-form ref="form" :model="form" label-width="80px"><el-form-item label="地址:" prop="addressId"><el-cascader v-if="open" v-model="form.addressId" :props="props" :options="options":placeholder="addressName" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
</template>
<script>
// 导入接口 （根基实际项目，自定义）
import { lazyList, getUser, updateUser, addUser } from '@/api/manager/user'
var uploadingClick = 0
export default {data() {return {title: '',open: false,options: [],//     options:[  // 级联选择器的数据格式// 		{// 		"ancestors": "0,100", // 上级的deptId以逗号分割形成的字符串// 		"deptName": "测试1",// 		"deptId": 25438,// 		"parentId": 100,// 		"parentName": "测试",// 		"existSub": true  // 	},// 	{// 		"ancestors": "0,100",// 		"deptName": "测试2",// 		"deptId": 25441,// 		"parentId": 100,// 		"parentName": "测试",// 		"existSub": false// 	},//    ],addressName: '请选择',  //当前选中的nameform: {addressId: [], //选中的上下级deptId所组成的数组：比如：  [100, 25438, 25519, 25652, 25604] ，},// 表单校验rules: {addressId: [{required: true,message: '地址不能为空',trigger: 'blur'}],},props: {//是否动态加载子节点，需与 lazyLoad 方法结合使用lazy: true,value: 'deptId',label: 'deptName',children: 'children',//在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值emitPath: false,//是否严格的遵守父子节点不互相关联checkStrictly: true,//加载动态数据的方法，仅在 lazy 为 true 时有效//function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)lazyLoad(node, resolve) {const queryParams = {}queryParams.parentId = node.value//根据parentId 查询下级的数据lazyList(queryParams).then(res => {res.data.forEach(item => { // 是否存在下级，是否禁用item.leaf = !item.existSubitem.disabled = false})resolve(res.data)})}},}},methods: {// 表单重置reset() {this.form = {addressId: [],}this.resetForm('form')},/** 新增操作 */handleAdd() {this.reset()this.open = truethis.title = '添加'},/** 修改操作 */handleUpdate(row) {this.reset()const id = row.id// 调用详情的接口getUser(id).then(response => {this.form = response.data// 处理addressId ，用来获取所有上下级deptId组成的数组this.form.addressId = this.dataEchoHandle(response.data)this.open = truethis.title = '修改'})},// Cascader 级联选择器 懒加载  数据回显dataEchoHandle(row) { // // 获取到当前的addressIdlet ancestors = row.addressId // 当前的id，比如：25604if (row.ancestors && row.ancestors != '') { // 格式：'0,100, 25438, 25519, 25652'// 对数据进行回显（获取所有父级的addressId，加上当前的addressId，组成的数组。）ancestors = row.ancestors.split(',')ancestors.shift() //去掉0ancestors = ancestors.map(Number) // 数组的每个元素由string转为number类型ancestors.push(row.addressId) // 将当前的id加入console.log(ancestors, 'ancestors')  // 获取到所有的id组成的数组  [100, 25438, 25519, 25652, 25604] }return ancestors},// 取消按钮cancel() {this.open = falsethis.reset()},/** 提交按钮 */submitForm: function () {if (uploadingClick == 0) {uploadingClick = 1this.$refs['form'].validate(valid => {if (valid) {console.log('this.form', this.form)const params = JSON.parse(JSON.stringify(this.form))// return;if (this.form.id != undefined) {if (params.addressId instanceof Array) {// 数组类型params.addressId = params.addressId[params.addressId.length - 1]}console.log('params修改', params)// return;updateUser(params).then(response => {this.$modal.msgSuccess('修改成功')this.open = false})} else {addUser(params).then(response => {this.$modal.msgSuccess('新增成功')this.open = false})}}})setTimeout(function () {uploadingClick = 0}, 3000)} else {this.$modal.msgError('请勿重复点击')}},}
}
</script>

在这里插入图片描述