通用查询
概述
后台管理系统中由于会用到比较多的表格展示,如果每个都去重新写的话,代码量会较多,且页面样式难以保持一致;因此基于这个需求,我们系统中将查询展示表格的页面进行了部分功能抽取,即通过一部分的配置+适当的代码扩展,使得开发过程更加标准化,更加利于维护。
本文主要讲解在前端中的配置扩展功能(基本用法)
# Full Example Screenshot
# Full Example Code
<template>
<query
:customTemplateCode="code"
:rowOperation="rowOperation"
:customColumn="customColumn"
:rowSelectIdentification="rowSelectIdentification"
:showOperation="showOperation"
rowOperationTop
@on-row-edit="rowEdit"
@on-row-view="rowView"
@on-row-publish="rowPublish"
@on-row-delete="rowDelete">
<template slot="card-header-btn-additional">
<e-button icon="plus" type="text" @click="doAdd">新增</e-button>
</template>
</query>
</template>
<script>
export default {
name: 'query-demo',
data: () => ({
code: 'apiindex533-243',
rowSelectIdentification: 'tmBasPlantId',
showOperation: true,
rowOperation: [
{
type: 'edit',
eventName: 'on-row-edit',
title: '编辑',
visible: true
},
{
type: 'view',
eventName: 'on-row-view',
title: '查看',
visible: true
},
{
type: 'publish',
eventName: 'on-row-publish',
title: '发布',
visible: true,
icon: 'plane'
},
{
type: 'delete',
eventName: 'on-row-delete',
title: '删除',
visible: true
}
],
customColumn: [
{
key: 'markStatus',
render: (h, params) => {
let isActive = params.row.markStatus
return (
<Tag color={isActive ? 'green' : 'red'}>{isActive ? '激活' : '停用'}</Tag>
)
}
}
]
}),
methods: {
doAdd () {
alert('click add')
},
rowEdit (row) {
console.log(row)
alert('click edit')
},
rowView (row) {
alert('click view')
},
rowPublish (row) {
alert('click publish')
},
rowDelete (row) {
alert('click delete')
}
}
}
</script>
# API
# Query props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
customTemplateCode | 配置的模板code,用来获取模板信息(模板生效的必填项) | String | - |
rowOperation | 每一行的操作按钮的定义,具体的配置如下 | Array | - |
customColumn | 自定义列,具体的配置如下 | Array | - |
rowSelectIdentification | 标志每一行的不同标志字段名,主要用来再选择行时用来区分 | String | id |
showOperation | 是否显示操作按钮 | Boolean | true |
rowOperationTop | 是否将行操作按钮放在顶部 | Boolean | false |
# Query props rowOperation
{
type: 'publish', // 指定按钮类型
eventName: 'on-row-publish', // 指定监听按钮点击时的事件名称
title: '发布', // 指定按钮上的文字
visible: true, // 指定按钮是否显示,可以接收Boolean
// visible: (row) => { // 同时也可以接受function,参数为row(行数据),返回true/false控制是否显示按钮
// return row.isOk
// }
icon: 'plane' // 指定按钮的图标
}
# Query props customColumn
[
{
key: 'markStatus',
render: (h, params) => {
let isActive = params.row.markStatus
return (
<Tag color={isActive ? 'green' : 'red'}>{isActive ? '激活' : '停用'}</Tag>
)
}
}
]
# Query Events
rowOperation中每个按钮绑定的eventName需要在query组件中绑定相应事件,从而达到监听的作用
# Query slot
名称 | 说明 |
---|---|
card-header-btn-additional | 给表格上加按钮,例如新增等按钮,不与行进行绑定,只做单独的一些业务操作功能 |