el-cascader懒加载回显问题

news2024/9/25 4:33:18

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

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2162363.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python【修炼1】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Python 目录 &#x1f449;&#x1f3fb;字典&#xff08;Dictionary&#xff09;&#x1f449;&#x1f3fb;列表(list)&#x1f449;&#x1f3fb;eval函数…

k8s前置准备:配置虚拟机网络

目录 前言查看本机ip地址修改虚拟机配置修改linux配置配置其余linux机器的网络参考文献 前言 本文的最终目的是使虚拟机内可以访问互联网&#xff0c;虚拟机之间可以互相访问。 虚拟机使用的是vmware&#xff0c;环境是windows&#xff0c;虚拟镜像是linux系统。 使用桥接模式…

视频去水印 —— 释放创意,让学习与创作更自由!

&#x1f31f; 视频去水印 —— 释放创意&#xff0c;让学习与创作更自由&#xff01; 在这个短视频盛行的时代&#xff0c;抖音、快手、小红书等平台成为了创意与灵感的聚集地。你是否曾遇到过想要学习或进行二次创作&#xff0c;却被视频中的水印所困扰&#xff1f;现在&…

Spring Cloud Alibaba-(3)OpenFeign【服务调用】

Spring Cloud Alibaba-&#xff08;1&#xff09;搭建项目环境 Spring Cloud Alibaba-&#xff08;2&#xff09;Nacos【服务注册与发现、配置管理】 Spring Cloud Alibaba-&#xff08;3&#xff09;OpenFeign【服务调用】 Spring Cloud Alibaba-&#xff08;4&#xff09;Sen…

SeeClick: Harnessing GUI Grounding for Advanced Visual GUI Agents论文学习

首先是惯例强调一下自己的工作是基于视觉的&#xff0c;不是那种拿一个html文件或者UI结构树给模型让他操作的工作。然后提出了一个很有意思的观点&#xff0c;认为Grounding能力&#xff08;定位能力&#xff09;对模型表现的影响非常大。 主要novelty就这几个&#xff1a; …

Python 解析 html

一、场景分析 假设有如下 html 文档&#xff1a; 写一段 python 脚本&#xff0c;解析出里面的数据&#xff0c;包括经度维度。 <div classstorelist><ul><li lng"100.111111" lat"10.111111"><h4>联盟店1</h4><p>…

单片机带隙电压基准电路

单片机带隙电压基准电路 一、带隙电压基准电路概述 带隙电压基准电路在单片机中占据着至关重要的地位。它能够为各种模拟集成电路提供稳定的参考电压&#xff0c;确保电路的正常运行。例如&#xff0c;在高精度的比较器中&#xff0c;带隙电压基准电路可以提供一个精确的参考…

电源芯片测试系统如何完成欠压关断/欠压关断滞后?

电源芯片欠压关断测试原理&#xff1a; 在测试芯片的欠压关断过程中我们会测试到芯片的启动电压和欠压关断滞后电压&#xff0c;所以这三个指标可以一起进行测量;而测试这些指标我们需要一台电源和数字万用表。 电源芯片欠压关断的测试需要将电源的接入芯片进行供电&#xff…

稳定为恒定功率负载供电的 DC/DC 转换器

恒定功率负载 (CPL) 存在于电动汽车、电信设备、电力电子设备等各种应用中。这些 CPL 是无论施加的电压或电流如何变化都保持恒定功耗的电气负载。与呈现恒定电阻的电阻负载不同&#xff0c;CPL 具有随电压或电流变化而变化的动态阻抗&#xff0c;即&#xff0c;当负载两端的电…

Vue的工程化和element快速入门

vue项目的创建&#xff1a; vue项目的启动方式&#xff1a; vue项目开发流程&#xff1a; 代码示例&#xff1a; <!-- <script>//写数据export default{data(){return{msg: 上海}}} </script> --><script setup>import {ref} from vue;//调用ref函数&…

网页护眼宝——全方位解析 Chrome Dark Reader 插件

网页护眼宝——全方位解析 Chrome Dark Reader 插件 1. 基本介绍&#xff1a;Chrome 插件的力量与 Dark Reader 的独特之处 随着现代浏览器的功能越来越强大&#xff0c;Chrome 插件为用户提供了极大的定制化能力。从广告屏蔽、性能优化到页面翻译&#xff0c;Chrome 插件几乎…

python如何匹配换行符

如下所示&#xff1a; p1 r(?<<div class"ds_cr">)(.*?)(?<div id"pageurl">) #这样采集html时出错&#xff0c;采集不到数据&#xff0c;正则中.是不能匹配 换行符&#xff0c;改成如下&#xff1a; p1 r(?<<div class"d…

Nanite缺失项目设置问题

今天新建虚幻引擎项目时 , 编辑器右下角收到这个提示 , 缺失项目设置&#xff01; 使用Nanite资产需要Shader Model 6&#xff08;SM6&#xff09;。请在此启用&#xff1a; 项目设置-> 平台-> Windows->D3D12目标着色器格式如未启用&#xff0c;Nanite资产将无法正常…

【研赛F题成品论文】24华为杯数学建模研赛F题成品论文+可运行代码丨免费分享

2024华为杯研究生数学建模竞赛F题精品成品论文已出&#xff01; F 题 X射线脉冲星光子到达时间建模 摘要 X射线脉冲星具有高度稳定的自转周期&#xff0c;被广泛应用于深空导航和时间基准的维护。本文针对Crab脉冲星&#xff0c;建立了光子到达时间的数学模型&#xff0c;并模…

初始MYSQL数据库(7)—— 视图

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; MYSQL 引言 前面我们学习MySQL数据库时&#xff0c;创建表之后&#xff0c;会在表中插入数据&#xff0c;在需要的时候&#xff0c;也会进行…

Qt-QComboBox输入类控件(31)

目录 描述 核心方法 核心信号 使用 代码方式 界面操作方式 动态使用 如何看待输入输出 String与QString互相转化 描述 一个可以下拉的输入框 核心方法 addItem(constQString&)添加⼀个条⽬currentIndex()获取当前条⽬的下标 从0开始计算.如果当前没有条⽬被选中…

MySQL的msi版本9.0在安装过程总结和需要注意的地方

下载 参考文档 [官方包快速下载]&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09; 使用zip文件安装可参考&#xff0c;这种直接把zip安装包解压到想要放的地方&#xff0c;并安装其中的方式一步步修改数据地址等配置即可。 个人使用了msi的安装文件 msi版本…

Vue3:快速生成模板代码

目录 一.模板代码 1.提供基础结构 2.定义组件名称 3.初始化数据和方法 4.应用样式 5.提高开发效率 二.操作 1.点击右下角设置按钮选择代码片段 2.输入vue.json&#xff0c;打开vue.json文件 3.构造模板 4.模板代码 5.使用 6.效果 一.模板代码 Vue3快速生成模板代…

通过document获取节点元素

1.层级节点 <ul><li id"li1">1</li><li>2</li><li id"li3">3</li><li>4</li><li>5</li></ul><script>//获取id名为li1的元素赋值给li1let li1document.getElementById(li…

为什么越来越多的视频监控AI分析做到了摄像头上?

在安防行业&#xff0c;视频监控已经非常广泛&#xff0c;是无可替代的基础信息化设施。早期的视频监控只是简单的通过摄像机对画面进行记录&#xff0c;然后通过记录的画面服务入侵探测和震慑burglars。随着近年来人工智能技术的兴起&#xff0c;人们越来越希望利用AI计算机的…