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