1.说明
rx-grid是一个表格控件,在我们的列表中随处可见,该控件是基于Ant design vue 来封装的,所以大部分属性可以参考Ant design vue 的官方文档;
2. 使用
//html
<rx-grid></rx-grid>
//引入
import { RxGrid } from "jpaas-common-lib"
export default {
components:{
RxGrid
}
}
3.属性数据(props)
参数 |
说明 |
类型 |
默认值 |
:url |
请求路径,与:queryParam一起使用 |
|
|
:queryParam |
请求参数,与url一起使用 |
|
|
:idField |
表格行数据的唯一值,相当于Ant design vue 表格的 :rowkey |
string |
‘id_’ |
:columns |
表格表头数据,见下面 columns |
arr |
[] |
:dataSource |
表格的数据,与:url只能二选一 |
arr |
[] |
:allowRowSelect |
是否显示选择行 |
Boolean |
false |
:multiSelect |
选择行的选择方式,单选/多选 |
Boolean |
false/单选 |
:showColumnsMenu |
头部右键菜单 |
Boolean |
false |
:alias |
表格别名,与头部右键菜单配合使用 |
string |
|
:showFooter |
是否显示表格footer |
Boolean |
false |
:bordered |
是否显示表格边线 |
Boolean |
false |
:expandIconColumnIndex |
当表格为树形结构的时候,定义展开/收起按钮的列,(取下标,从0开始) |
number |
1 |
:heightauto |
是否以内容多少来撑开表格 |
Boolean |
false |
:showPage |
是否显示分页 |
Boolean |
true |
:pageSizeOptions |
设置分页条数(showPage为true的时候生效) |
arr |
[10,20,30,40,50] |
:defaultPageSize |
默认分页大小(showPage为true的时候生效) |
string/number |
‘10’ |
:showPageSize |
是否显示下拉分页的条目(showPage为true的时候生效) |
Boolean |
true |
:showPageJump |
是否显示跳转下拉控件(showPage为true的时候生效) |
Boolean |
true |
:showPageEntry |
是否显示数据条目(showPage为true的时候生效) |
Boolean |
true |
:getCheckboxProps |
选择框的默认配置 |
Function(record) |
Ant design vue |
:showExpandedRowRender |
是否显示展示行 |
Boolean |
false |
:handData |
处理列表数据,这个是在数据查询后,可以对这个数据进行加工处理 |
Function(data) |
Function |
:activeEditFun |
是否激活行编辑函数 |
Function(col,row) |
Function |
:rowSummaryFun |
行统计函数 |
Function(record) |
Function |
:drawSummaryFun |
表格统计函数 |
Function(e) |
Function |
:expanRowKeys |
默认展开行的数组 |
arr |
[] |
:selectRowKeys |
默认选择行的数组 |
arr |
[] |
:showColumns |
默认显示的列数组 |
arr |
[] |
:loadDataOnstart |
是否默认加载表格数据,有些情况不需要一进来就加载数据 |
Boolean |
true |
:allowMoveColumn |
是否允许表格拖动 |
Boolean |
true |
:handRowClass |
处理行样式,这个可以返回行样式的值,有时需要对行的样式修改可以使用该属性,示例 http://doc.redxun.cn/docs/jpaas/rowClass |
Function(record,index) |
Function |
4. columns
参数 |
说明 |
类型 |
默认值 |
align |
设置列内容的对齐方式 |
‘left’ / ‘right’ / ‘center’ |
‘left’ |
dataIndex |
列数据在数据项中对应的 key |
string |
|
title |
列头显示文字 |
|
|
width |
列宽度 |
number |
120 |
scopedSlots |
使用 columns 时,可以通过该属性配置支持 slot-scope 的属性,如 scopedSlots: { customRender: ‘XXX’} |
obj |
xxx 对应 dataIndex 的 key |
fixed |
列是否固定 |
boolean |
false |
sorter |
支持排序 |
boolean |
false |
sortField |
排序列 |
String |
需要排序的字段名称 |
5. 事件
事件名 |
说明 |
rowClick |
行点击事件,参数 (record,index),当前记录,记录索引 |
rowDblClick |
行双击事件 参数 (record,index),当前记录,记录索引 |
selectChange |
行选择事件 参数 (this.selectedRowKeys,this.selectedRows),参数1,选中的主键数组,参数2 选中的行数组 |
6. 控件方法
方法名 |
说明 |
getSelectedRows() |
获取选中的行,可以多行 |
getSelectedRow() |
获取选中的行,为单行 |
getData() |
获取列表数据 |
loadByParams(params) |
根据参数加载数据。 参数格式 {Q_F_SQR_NAME_S_LK: “管理员”} |
addRow(row,index) |
添加数据行 |
addRows(rowAry,index) |
添加多个数据行 |
removeSelected() |
删除选中的数据 |
removeRows(selectRows) |
删除选中的行,参数为主键数组。 |
clear() |
清除表格数据 |
moveUp(selectRows) |
向上移动,参数为主键数组,如果不填,那么为选中的记录数组 |
moveDown(selectRows) |
向下移动,参数为主键数组,如果不填,那么为选中的记录数组 |
onRefresh |
刷新列表,当前页设置为1 |
7.示例
7.1 是否允许选择框选中
<rx-grid :getCheckboxProps="demoSelect"></rx-grid>
<script>
export default{
methods:{
demoSelect(){
var rtn=record.NAME=="小米";
return {
props:{
disabled:rtn
}
}
}
}
}
</script>
文档更新时间: 2022-03-27 10:53 作者:yangxing