查询回显input的封
最近有幸在做一个管理系统采用的是vue+element-ui, 表单页面非常多, 而且都出奇的大,在多页面开发的时候做大表单的优缺点我大概先说一下, 我们的任务是, 基于现在的工具, 使他更简洁, 功能也不差, 而且更利于开发, 维护
直接进入正题
功能是这样:
表单中常有的功能是一个input绑定一个按钮, 当我点击按钮的时候, 弹出查询框, 里面有个小列表, 查到数据后点一行再回显, 很简单的需求, 但是会有大量的应用地点, 所以肯定不能复制粘贴, 输入框我们每次都可以写, 但是弹出来的小查询如果每个表单, 每个独立的弹框再去重复写就麻烦了, 但是如果我们把它提出来我们就轻松很多, 通过数据去控制功能
有些人可能觉得都是废话, 而且就这么个简单的东西, 写这么多有必要么(我想尽量的把我想到的说出来, 手动滑稽)
要做的就是这个查询的小列表, 我们整理一下要做的事情, 先做规划再写代码, 避免边写边改, 不然会让代码越来越难维护, 写到下面发现上面不该那么写, 再去改又懒的改, 然后就郁闷着勉为其难的提交上去了, 虽然功能在但自己看着都……
1. 分析需求: 我们需要什么元素?
a. 一个form表单, 一个table, 分页(布局)
b. n个条件框, 查询按钮, 重置按钮, 其他功能按钮(form内部)
通过整理元素我们知道, 有几样东西是固定的, 一个form, 一个不知道几列的table, 一个分页功能,查询, 重置按钮
整理出这个我们就可以第一步把元素构建全, 可能有n个的我们就用一个先占个位置, 结构如下:
<div class="box">
<div class="form">
<form action="">
<input type="text"> *n
</form>
</div>
<div class="table">
<table>
<tr> *n
<td></td>
</tr>
</table>
</div>
<div class="paging"></div>
<div class="button">
<button>查询</button>
<button>重置</button>
<button>其余功能</button> *n
</div>
</div>*n的地方代表了接下来我们要用循环创建
2. 我们需要实现什么方法并且那些是要外部传递的
a. 查询
b. 点击分页后查询数据
c. 重置
d. 选中一行时拿到数据
e. 其余功能的触发
这样一梳理, 就很清晰了, 因为我们的查数据和分页在一个接口中我就讲分页查询, 和普通查询放到了一个函数里, 所以methods中实现剩下的四个方法
methods: {
