前言​

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

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

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

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

正文

​今天为了实现一个叫做表单权限的问题，element官方没有提供这个功能，公司实现了，但是看不到源码，(╥╯^╰╥)
没办法，只能自己上手写代码。
百度了好几篇博客，都好垃圾 。
看效果

这个还只是一个半成品，我先讲讲实现思路。

这是element的官方生成的dom，而我现在想要将里面的元素替换成一段 ‘< label>xx</ label>’
恕我太菜，居然找不到怎么实现。
尝试了好几种，效果都不太理想。

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

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

这时，就要用到updated()

第一步
在el-form中添加ref

第二步
在这里写个方法去调用

第三步
我们将ref打印出来，看到下面的输出后

可以看到我们要操作的dom都在这里了，只需要替换掉不需要代码就行。

第四步
代码实现