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

最新推荐文章于 2024-09-13 22:25:46 发布

转载最新推荐文章于 2024-09-13 22:25:46 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.jeasyui.net/vue/663.html

文章标签：

#vue #easyUI

vue2 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用VX-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

事件

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