说明

rx-grid是一个表格控件,在我们的列表中随处可见,该控件是基于Ant design vue 来封装的,所以大部分属性可以参考Ant design vue 的官方文档;

使用

//html

<rx-grid></rx-grid>

//引入
import { RxGrid } from "jpaas-common-lib"
export default {
    components:{
        RxGrid
    }
}

API

参数 说明 类型 默认值
: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
:handDatas 处理列表数据(不显示) 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

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
文档更新时间: 2021-08-17 15:36   作者:yangxing