searchData(pageNum = 0) {
//查询数据, ES6参数赋值默认为0页
},
selectRowData(row) {
//选中单行是触发的函数, 在各个ui框架table中都应该有这个方法, 我们只要实现它就行了
},
resetSearchForm() {
//重置form参数
},
doFunction(){
//执行其他函数
}
}
好了, 接下来看看那些需要是外部传入的方法, 以及为什么要从外部传入
i. 首先是一个查询数据的方法
理由: 我们需要从外部传入, 这是个查询列表的组件, 我们肯定不是只适用于一个接口, 而是尽量让他各种各样情形下都适用于我们
ii. 选中单行后要传给父组件的方法
在vue中, 子组件是不能修改父组件的, 在框架封装中大部分是作者自己封装了dispatch 和 broadcast, 但是我们就应用于自己的项目, 所以我们不用那么麻烦, 如果想用可以去ui框架源码中复制一份出来用, 我们就通过父组件传一个函数给子组件, 然后子组件调用这个函数回调给父组件就好了, 所以要传一个函数
iii. 其他的执行函数
3. 我们要vue的data参数了, 并确定哪些是在组件中, 哪些是外部传入
a. from表单的数据绑定(但是我们不确定要有几个框所以这里要多留一步)
没错就这一个就够了, 我们要做的是可动态配置所以更多的来自于传参
a. 传入一个input数组, 决定有几个条件搜索框
b. 传入table的列的数组, 附带上每列宽度, 列名
c. 传入其他功能按钮列表数组
d. 传入查询出来的分页参数
e. 传入查询出来的数据列表数组
4. 有了这些我们接下来就是一一实现这些东西就好了
还是先从结构开始
<div class="searchAlert">
<div class="inputBox">
<el-form :inline="true" :model="searchForm" class="searchAlertForm" ref="searchForm">
<!--循环创建条件搜索框-->
<el-form-item v-for="item in inputarr" :key="item.label" :prop="item.dataName">
<el-tooltip :content="item.label" placement="top">
<el-input v-model="searchForm[item.dataName]" :placeholder="item.label" size="mini"></el-input>
</el-tooltip>
</el-form-item>
</el-form>
</div>
<div class="tableBox">
<el-table :data="searchdatalist" style="width: 100%" size="mini" highlight-current-row
@current-change="selectrowdata" :border="true">
<!--循环创建table列-->
<el-table-column v-for="item in coleumarr" :key="item.label" :prop="item.prop" :label="item.label"
:width="item.width">
</el-table-column>
</el-table>
</div>
<!--判断是否显示页码条-->
