(简易)测试数据构造平台: 22 编辑工具

2022-07-07 15:08:25 浏览数 (1)

【本节目标】点击工具的编辑按钮,可以通过弹窗修改工具的属性 首先,要给添加一个弹层,elementui的弹层可以使用dialog对话框:

注意这个对话框的dom位置,是可以放在div的根目录下的。

然后给这个dialog添加 默认隐藏,点击显示的效果:

利用的是让visible.sync(控制显示隐藏的属性)的这个值为变量dialogVisable且默认为假,如果点击事件可以让它变成真,那么dialog就会显示。

测试一下:

到此,dialog对话框的母版就算完成,接下来就是给它填充内容即可。

内容应该就是这个工具的各个字段(不过我们当前的工具只有一个名称字段可以改),所以我们大可以用表单form来实现。

在dialog 中添加form表单如下:

效果如下:

然后我们还缺少一对按钮:

注意,其中的俩个按钮中的取消,仅仅是给这个控制显示隐藏的变量变成了假而已,而保存功能我们后面需要写一个函数来实现。

效果如下:

到这,我们的工具外形基本就确定了。后续增加字段可以很简单的添加即可。

而这个编辑功能到这里并没有完成,因我们还剩俩个主要功能没做:

显示工具旧名字,和保存新名字。

本节课到此,下节课继续。

0 人点赞