el-cascader懒加载回显问题

思路:可以在编辑和修改的时候,新增一个el-input,修改弹窗展示出相应的name,鼠标聚焦的时候展示出el-cascader

javascript 复制代码
<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-form-item label="供应商分类" prop="supplier_class_id">
				<el-cascader v-if="mode=='add' || classStutus==false" v-model="form.supplier_class_id" style="width: 100%;" :props="class_tree_props" clearable placeholder="请选择标签" :show-all-levels="false"></el-cascader>
				<el-input v-if="mode=='edit' && classStutus" v-model="form.supplier_class_name" @focus="supplierClassBlur"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button v-if="mode!='show'" type="primary" @click="submit()">保 存</el-button>
			<el-button @click="visible=false" >取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增供应商',
				},
				visible: false,
				form: {},
				supplierClassList: [],
				class_tree_props: {
					label: 'name',
					value: 'id',
					checkStrictly: true,
					emitPath: false,
					lazy: true,
					lazyLoad: this.getClassOptions,
				},
				classStutus: true,
			}
		},
		mounted() {
			this.getContactList();
			this.getEvaluateList();
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			supplierClassBlur(){
				this.classStutus = false;
			},
			async getClassOptions(node, resolve){
				if(node.data.id){
					let resp = await this.$API.supplier.supplierclass.json_list.get({ parent_id: node.data.id, page: 0 });
					resolve(resp.data.rows);
				} else {
					const resp = await this.$API.supplier.supplierclass.json_list.get({page: 0, parent_id: 1});
					resolve(resp.data.rows);
				}
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						let res = null;
						if(this.form.id) {
							res = await this.$API.supplier.supplier.json_edit.put(this.form.id, this.form);
						} else {
							res = await this.$API.supplier.supplier.json_add.post(this.form);
						}
						if(res.code == 200){
							this.$emit('success');
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			setData(data){
				this.form = {  ...data };
			}
		}
	}
</script>

<style>
</style>
相关推荐
羽羽Ci Ci2 分钟前
axios vue.js
前端·javascript·vue.js
axihaihai2 分钟前
购物街项目TabBar的封装
vue.js
岳哥i27 分钟前
前端项目接入单元测试手册
前端·单元测试
小彭努力中32 分钟前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
栈老师不回家1 小时前
Element UI 组件库详解【Vue】
前端·vue.js·ui
前端青山1 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵1 小时前
什么是Sass,有什么特点
前端·rust·sass
栈老师不回家1 小时前
axios 请求跨域问题
前端·vue.js
前端拾光者1 小时前
前端数据可视化思路及实现案例
前端·数据库·信息可视化
沉默璇年2 小时前
react中Fragment的使用场景
前端·react.js·前端框架