Vue EasyUI 数据表格
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| idField |
string |
指示哪个字段是标识字段。 |
null |
| groupField |
string |
指示要分组的字段。 |
null |
| expanderWidth |
number |
展开列宽。 |
30 |
事件列表
| 名称 |
参数 |
作用描述 |
| rowExpand |
row |
在展开行时触发。 |
| rowCollapse |
row |
当行被折叠时触发。 |
| groupExpand |
value, rows, collapsed |
在展开组时触发。 |
| groupCollapse |
value, rows, collapsed |
在组折叠时触发。 |
方法列表
| 名称 |
参数 |
返回值 |
作用描述 |
| sortData |
none |
void |
对数据行进行排序。 |
| collapseGroup |
value |
void |
一组折叠。。 |
| expandGroup |
value |
void |
扩展一组。 |
| toggleGroup |
value |
void |
一组切换。 |
| collapseRow |
row |
void |
折叠一行。 |
| expandRow |
row |
void |
扩充一行。 |
| toggleRow |
row |
void |
连续切换。 |
注：
- 继承： GridBase 。
使用方法
- 与表格列（ gridcolumn ）配合创建数据表格（datagrid）。
<DataGrid :data="data" style="width:600px;height:250px">
<GridColumn field="itemid" title="Item ID" :frozen="true"></GridColumn>
<GridColumn field="name" title="Name" :frozen="true"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right" width="100"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right" width="100"></GridColumn>
<GridColumn field="attr" title="Attribute" width="200"></GridColumn>
<GridColumn field="status" title="Status" width="100"></GridColumn>
</DataGrid>