el-form表单el-input、el-select只读设置,去掉(删掉)边框线,完美替换整个HTML

news/2024/7/10 2:15:03 标签: vue

前言​

欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!

欢迎大家关注我的知识库,全栈进阶之路·语雀

你的关注就是我前进的动力!

CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。

正文

​今天为了实现一个叫做表单权限的问题,element官方没有提供这个功能,公司实现了,但是看不到源码,(╥╯^╰╥)
没办法,只能自己上手写代码。
百度了好几篇博客,都好垃圾
看效果
在这里插入图片描述
这个还只是一个半成品,我先讲讲实现思路。
在这里插入图片描述
这是element的官方生成的dom,而我现在想要将里面的元素替换成一段 ‘< label>xx</ label>’
恕我太菜,居然找不到怎么实现。
尝试了好几种,效果都不太理想。

我们先来看看vue的生命周期,这种数据一定是等数据基本渲染完毕后,我们再去操作dom。

使用指令来解决这条思路不行,指令是在数据渲染前执行,拿不到相应的数据,无法进行赋值操作。

这时,就要用到updated()

第一步
在el-form中添加ref
在这里插入图片描述
第二步
在这里写个方法去调用
在这里插入图片描述
第三步
我们将ref打印出来,看到下面的输出后
在这里插入图片描述
可以看到我们要操作的dom都在这里了,只需要替换掉不需要代码就行。
在这里插入图片描述
第四步
代码实现
在这里插入图片描述


http://www.niftyadmin.cn/n/1638464.html

相关文章

使用wifi网卡笔记5---AP模式

使用WIFI网卡的AP功能 1、下载源码 hostapd: http://w1.fi/hostapd/ 2、编译、安装&#xff08;hostapd依赖于libnl库&#xff0c;需要编译、安装此库&#xff09; tar xzf hostapd-2.0.tar.gz cd hostapd-2.0/ cd hostapd/ cp defconfig .config 修改.config, 加一行: CONFIG_…

VUE解决Cannot read property ‘length‘ of undefined(发生原因以及解决思路)

这个错误是什么 某个数组找不到值&#xff0c;有一个地方进行了强行赋值 为什么会报这个错误 因为你在使用数组时&#xff0c;有一些v-for循环渲染&#xff0c;它不是拿着data创建的 [] 空数组去遍历&#xff0c;而是在某个地方你去获取下拉框的数据&#xff0c;或者获取dat…

运行地址、链接地址、加载地址、存储地址

1、概念理解 运行地址<--->链接地址&#xff1a;他们两个是等价的&#xff0c;只是两种不同的说法。 加载地址<--->存储地址&#xff1a;他们两个是等价的&#xff0c;也是两种不同的说法。 运行地址&#xff1a;程序在SRAM、SDRAM中执行时的地址。就是执行这条指…

多层(嵌套)for循环中list add新增map或者object,内容和地址都是一个(被覆盖问题)

首先呢&#xff0c;我直接拿那些人博客的例子。 public static void main(String[] args) {int [] arrs{1,2,3,4};String[] sheets {"我","是"}ArrayList<String> strings new ArrayList<>();for (String sheet : sheets){for (int i: arrs…

汇编调用C函数要设置栈的原因

转载来源http://www.cnblogs.com/xmphoenix/archive/2012/04/28/2475399.html 一.栈的整体作用 (1)保存现场/上下文 (2)传递参数:汇编代码调用c函数时&#xff0c;需传递参数 (3)保存临时变量:包括函数的非静态局部变量以及编译器自动生成的其他临时变量。二.为什么汇编代码…

linux scp 【全新思路解决】出现Permission denied问题

前言​ 欢迎大家来到我的博客&#xff0c;请各位看客们点赞、收藏、关注三连&#xff01; 欢迎大家关注我的知识库&#xff0c;Java之从零开始语雀 你的关注就是我前进的动力&#xff01; CSDN专注于问题解决的博客记录&#xff0c;语雀专注于知识的收集与汇总&#xff0c;…

el-dialog打开与关闭的几种方式

前言​ 欢迎大家来到我的博客&#xff0c;请各位看客们点赞、收藏、关注三连&#xff01; 欢迎大家关注我的知识库&#xff0c;全栈进阶之路语雀 你的关注就是我前进的动力&#xff01; CSDN专注于问题解决的博客记录&#xff0c;语雀专注于知识的收集与汇总&#xff0c;包…

跳转指令b ,bl

转载来源http://blog.sina.com.cn/s/blog_709a46cf0101ev7h.html 1、B、BL跳转指令机器码分析 B跳转指令&#xff1a;它是个相对跳转指令&#xff0c;其机器码格式如下&#xff1a; [31:28]位是条件码&#xff1b;[27:24]位为“1010”&#xff08;0xeaffffff&#xff09;时&…