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

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

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

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

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

测试一下：

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

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

在dialog 中添加form表单如下：

效果如下：

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

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

效果如下：

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

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

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

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