1.0.1 • Published 5 years ago
search-form-table v1.0.1
查询和表格为一体的封装组件
注意: 该组件为公司内部使用,部分方法没有实现独立抽取;使用需要改造
- 本组件数目针对内部使用者
API 文档
属性
感谢 @zollero
参考 :https://github.com/zollero/el-search-table-pagination/blob/master/docs/zh_CN.md
参数 | 类型 | 说明 | 默认值 | 是否必须 |
---|---|---|---|---|
form-options | object | 数据主体 | - | 是 |
url | string | 请求Url | - | 是 |
ref | searchForm | 默认参数 | 是 | |
columns | array | 表格数据 | [] | 是 |
headers | object | 默认请求参数 | - | 否 |
groupBtn | array | 按钮组 | [] | 是 |
btnsize | string | 按钮大小 | [] | 否 |
paginationHt | math | 多余的高度 | [] | 否 |
selectionShow | Boolean | 是否需要选择框,配合’selection-change‘ 使用 | - | 否 |
Table column 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
prop | 展示字段的字段值 | string | - | - |
label | 列名 | string | - | - |
width | 列宽 | number | - | 140 |
minWidth | 最小列宽 | number | - | - |
filter | 过滤器名(只有配置在全局的filter才有效) | string | - | - |
render | 处理数据的函数,接收行数据作为参数 | function | - | - |
slotName | 使用 slot 标记的代码块的 slot 属性值 | string | - | - |
type | 0.4.28 后支持,Element UI Table支持的一个属性,借用这个属性来切换是否使用本组件column内的插槽内容,当本属性没有给值时,本组件保持和之前版本一样的兼容性,组件会接管column数组中的定义并定义Element UI Table Column,只有指定的属性才会给予,并且会实现组件中给予的render 和formatter 等功能。如果该属性一旦有给值时,column 定义的所有属性都会传递给Element UI Table Column,本组件也不会对column内容进行处理,相应的处理能力也交给Element UI Table本身,通过这种方式,也可以支持Element UI Table中的多选列,Index列等,设置为default 也即为Element UI Table的缺省模式,会从数据对象中读取prop 属性,也会受到filter 的过滤,只不过处理都是Element UI Table来进行了。 | string | default/selection/index/expand |
注:更多属性,请参考 Element UI Table column 的文档。
支持的Element UI Table column
属性有:column-key / fixed / render-header / sortable / sort-by / sort-method / resizable / formatter / show-overflow-tooltip / align / header-align / class-name / label-class-name / selectable / reserve-selection / filters / filter-placement / filter-multiple / filter-method / filtered-value 。
注:关于formatter
属性,如果定义了renderer
或者filter
的时候,formatter
不起作用。
Form Option 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
forms | form表单配置对象数组。详情见Form Item 属性 | arrayobject | - | - |
size | 全局的表单尺寸 | string | large/small/mini | - |
showResetBtn | 是否显示'重置'按钮 | boolean | - | false |
inline | 行内表单模式 | boolean | - | false |
labelWidth | 表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 | number | - | - |
itemWidth | 表单域宽度 | number | - | - |
submitHandler | 查询按钮的click处理函数,接收form表单对象数据作为第一个参数 | function | - | - |
submitLoading | 查询按钮的加载中状态 | boolean | - | - |
submitBtnText | 查询按钮的文本 | string | - | 查询 |
resetBtnText | 重置按钮的文本 | string | - | 重置 |
resetBtnCallback | 重置按钮点击事件的回调函数,在重置了搜索条件之后执行 | function | - | - |
- 支持内部组件
select-option,itemType === 'selects'
- 支持内部组件
major,itemType === 'major'
Slots
slot名称 | 说明 |
---|---|
form | table 上部展示一个搜索区域,该slot 下通过scope 可以访问到两个属性:loading(查询中的loading状态值),search(搜索方法) |
prepend | table中,在最左边添加的列 |
append | table中,在最右边添加的列,一般可放置操作列 |
Events
事件名 | 说明 | 参数 |
---|---|---|
select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
selection-change | 当选择项发生变化时会触发该事件 | selection |
cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
row-click | 当某一行被点击时会触发该事件 | row, event, column |
row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
row-dblclick | 当某一行被双击时会触发该事件 | row, event |
header-click | 当某一列的表头被点击时会触发该事件 | column, event |
sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
filter-change | 当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。 | filters |
current-change | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
expand (v1.x) | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
expand-change (v2.x) | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
注意:我们还定义了一些固定的方法名称,详情请看源码
使用
<search-form-table
ref="searchForm"
:columns="formOptions.columns"
:headers="formOptions.params"
:form-options="formOptions"
:selectionShow="true"
:url="formOptions.url"
@searchHandler="searchProcedure"
@getListSuccess="getListSuccess"
@selection-change="handleSelectionChange"
@add="grant"
@edit="noGrant">
<!-- 可以手动添加多列 -->
<el-table-column slot="prepend" label="操作" align="center" min-width="140">
<template scope="scope">
<el-button size="small" type="info" @click="show(scope.row)">查看
</el-button>
<el-button size="small" type="warning" @click="edit(scope.row)">修改
</el-button>
</template>
</el-table-column>
<!-- 对列的位置做修改调换 -->
<template scope="scope" slot="rowConter">
{{scope.row.**}
</template>
</search-form-table>
formOptions: {
url: this.$globlURLPrefix.daily + "/allowance/list",
groupBtn: [
{text: '发放', btnEvn: 'add',},
{text: '不发放', btnEvn: 'edit',}
],
forms: [
{prop: 'userName', label: '姓名:', itemType: 'input', placeholder: '姓名', value: ''},
{prop: 'depId', label: '科室:', type: 'byUserType', itemType: 'selects', placeholder: '科室', value: '', options: '', userId: ''
},
{prop: 'provideMonth', label: '发放年月:', itemType: 'month', value: '',},
{prop: 'userType', label: '生源类型:', itemType: 'select', value: '',options: stateOption }
],
columns: [
{ prop: 'userName', label: '姓名', minWidth: 200 },
{ prop: 'userSchool', label: '学校', minWidth: 180 },
{prop: 'userMajor', label: '专业', minWidth: 200,},
{ prop: 'depName', label: '科室', minWidth: 180 ,},
{ prop: 'provideMonth', label: '发放月份', minWidth: 120 },
{prop:'provideAmount',label: '应发金额', minWidth: 120,},
{ label: '状态', slotName:'rowConter',}, //
{ prop: 'provideStatus', label: '状态', filter: 'typeText',}, //
]
},
methods: {
// 对当前页面做处理,如果没有特殊需要处理的提交字段,不需要
//该方法为 如果在查询字段种有特殊字符需要处理的,在此处理 并在此页面调用
searchProcedure() {
let obj = {};
this.formOptions.forms.map(item => {
if (item.prop) {
obj[item.prop] = item.value
}
})
let params = obj
params.provideMonth = this.conductDate(params.provideMonth, 'yyyy-MM');
this.$refs.searchForm.fetchHandler(params)
},
// 该方法为数据请求后返回的结构,res直接接收,默认是 res.data||[] 如果是data下的 需要单独传递
getListSuccess(res){
this.$refs.searchForm.getListSuccess(res.data.list)
},
/*
* checkbox 选择后触发事件
* @param val Array 存在所有的选择每一个行数据
*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
}