Package Exports

x-data-grid
x-data-grid/lib/xDataGrid.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (x-data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

x-data-grid

安装

npm install x-data-grid -S

使用

import Vue from 'vue'

import xDataGrid from 'x-data-grid'
Vue.use(xDataGrid)
import 'x-data-grid/lib/xDataGrid.css'

Demo ：https://wuchuanxun.github.io/x-data-grid/

参数配置

参数	类型	说明
columns	Object Array	列定义
source	Object Array	数据
pageSize	Number	0表示不分页
editable	Boolean	表格是否可以编辑
height	String	内表格高度，可用calc
rowKey	String	行的键，默认用_index
hiddenSearch	Boolean	隐藏搜索行
hiddenFooter	Boolean	隐藏底部分页栏
noDataText	String	没有数据显示的文本
overwriteSearch	Boolean	用slot=_search替换搜索框
enableExpand	Boolean	是否允许展开行
clickExpand	Boolean	单机展开行，建议不与editable混用

列定义

属性	类型	选项	说明
type	Sting	text\|number\|_check	_check表示勾选框
width	Number
title	String		行标题
key	String\|Number		属性索引，可使用.
adjustable	Boolean		可调整列宽
filterable	Boolean		加入搜索，默认False
sortable	Boolean		是否可以搜索
sortFn	function(a,b): number		自定义排序比较函数，可以不指定
scopedSlots	String		自定义插槽
align	String	left\|center\|right	对齐方式
ellipsis	Boolean		是否使用省略号
_sortType	String	normal\|asc\|desc	默认排序方式

插槽使用

<template
    slot="slotName"
    slot-scope="text,record,index"
>
    <a>
        {{ text }}
    </a>
</template>

其中 text = record[key]

事件

事件名称	参数	说明
selectChanged	selectRowKeys	选择的行key列表
editCell	cellData	编辑单元格编辑后的数据
activeRowChanged	rowData	点选行，参数表示行数据

注：双击启用编辑，回车确定更改

行选择

_checked 属性表示是否选中

行展开

_expanded 属性表示是否展开，展开渲染插槽

<p
   slot="expandedRowRender"
   slot-scope="record,index"
>
    {{record}} {{index}}
</p>

自定义筛选

overwriteSearch 用自己的筛选代替原有的调用节点函数 filterData, 传入筛选的函数，函数接收原始的数组作为输入，返回筛选后的数组

修改行间距

.x-data-grid {
    th,td{
      padding: 4px 6px !important;
    }
}