Vue: EasyUI--安装&DataGrid(数据表格)

一、安装步骤

npm install vx-easyui --save

//main.js
import 'vx-easyui/dist/themes/default/easyui.css';
import 'vx-easyui/dist/themes/icon.css';
import 'vx-easyui/dist/themes/vue.css';
import EasyUI from 'vx-easyui';
Vue.use(EasyUI);

二、DataGrid(数据表格)

1.用法

<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>

2.属性

名称	类型	描述	默认
idField	string	指示哪个字段是标识字段。	null
groupField	string	指示要分组的字段。	null
expanderWidth	string	展开列宽。	30

3. 事件

名称	参数	描述
rowExpand	row	在展开行时触发。
rowCollapse	row	当行被折叠时触发。
groupExpand	value, rows, collapsed	在展开组时触发。
groupCollapse	value, rows, collapsed	在组折叠时触发。

4.方法

名称	参数	返回值	描述
sortData	none	void	对数据进行排序
collapseGroup	value	void
collapseGroup	value	void
collapseGroup	value	void