前言
欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!
欢迎大家关注我的知识库,全栈进阶之路·语雀
你的关注就是我前进的动力!
CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。
正文
今天为了实现一个叫做表单权限的问题,element官方没有提供这个功能,公司实现了,但是看不到源码,(╥╯^╰╥)
没办法,只能自己上手写代码。
百度了好几篇博客,都好垃圾 。
看效果
这个还只是一个半成品,我先讲讲实现思路。
这是element的官方生成的dom,而我现在想要将里面的元素替换成一段 ‘< label>xx</ label>’
恕我太菜,居然找不到怎么实现。
尝试了好几种,效果都不太理想。
我们先来看看vue的生命周期,这种数据一定是等数据基本渲染完毕后,我们再去操作dom。
使用指令来解决这条思路不行,指令是在数据渲染前执行,拿不到相应的数据,无法进行赋值操作。
这时,就要用到updated()
第一步
在el-form中添加ref
第二步
在这里写个方法去调用
第三步
我们将ref打印出来,看到下面的输出后
可以看到我们要操作的dom都在这里了,只需要替换掉不需要代码就行。
第四步
代码实现