安装步骤
1. 使用NPM进行安装
npm install vx-easyui --save
2. 引入 EasyUI 文件
EasyUI 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);
3. 将组件导入“App.vue”
<template>
<div>
<DataGrid :data="data" style="height:250px">
<GridColumn field="itemid" title="Item ID"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
"code": "FI-SW-01",
"name": "Koi",
"unitcost": 10.00,
"status": "P",
"listprice": 36.50,
"attr": "Large",
"itemid": "EST-1"
},
{
"code": "K9-DL-01",
"name": "Dalmation",
"unitcost": 12.00,
"status": "P",
"listprice": 18.50,
"attr": "Spotted Adult Female",
"itemid": "EST-10"
},
{
"code": "RP-SN-01",
"name": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 38.50,
"attr": "Venomless",
"itemid": "EST-11"
},
{
"code": "RP-SN-01",
"name": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 26.50,
"attr": "Rattleless",
"itemid": "EST-12"
},
{
"code": "RP-LI-02",
"name": "Iguana",
"unitcost": 12.00,
"status": "P",
"listprice": 35.50,
"attr": "Green Adult",
"itemid": "EST-13"
},
{
"code": "FL-DSH-01",
"name": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 158.50,
"attr": "Tailless",
"itemid": "EST-14"
},
{
"code": "FL-DSH-01",
"name": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 83.50,
"attr": "With tail",
"itemid": "EST-15"
},
{
"code": "FL-DLH-02",
"name": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 23.50,
"attr": "Adult Female",
"itemid": "EST-16"
},
{
"code": "FL-DLH-02",
"name": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 89.50,
"attr": "Adult Male",
"itemid": "EST-17"
},
{
"code": "AV-CB-01",
"name": "Amazon Parrot",
"unitcost": 92.00,
"status": "P",
"listprice": 63.50,
"attr": "Adult Male",
"itemid": "EST-18"
}
]
}
}
}
</script>
ButtonGroup(按钮组)
继承
none
用法
<ButtonGroup selectionMode="single">
<LinkButton iconCls="icon-add" :toggle="true" :selected="true">Add</LinkButton>
<LinkButton iconCls="icon-remove" :toggle="true">Remove</LinkButton>
<LinkButton iconCls="icon-save" :toggle="true">Save</LinkButton>
<LinkButton iconCls="icon-cut" :disabled="true">Cut</LinkButton>
</ButtonGroup>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| selectionMode | string | 按钮选择模式。可选的值:multiple, single.。 | multiple |
FieldBase(基本字段)
继承
none
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| 名称 | string | 字段名 | null |
| invalid | boolean | 定义该值是否无效 | false |
| validateOnBlur | boolean | 定义在失去焦点时是否验证。 | false |
| validateOnChange | boolean | 定义是否在值更改时验证。 | false |
Tree(树)
继承
none
用法
<Tree :data="data" @selectionChange="selection=$event"></Tree>
<p v-if="selection">选择: {
{selection.text}}</p>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| data | array | 要加载的数据 | [] |
| selectLeafOnly | boolean | 定义是否只选择叶节点。 | false |
| checkbox | boolean | 定义是否在每个节点前显示复选框。 | false |
| cascadeCheck | boolean | 定义是否进行级联检查。 | true |
| cascadeCheck | boolean | 定义是否进行级联检查。 | true |
作用域
| 名称 | 参数 | 描述 |
|---|---|---|
| 默认 | node | 节点作用域。 |
| editor | node | 编辑节点作用域。 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| selectionChange | node | 选择节点时触发。 |
| nodeClick | node | 单击节点时触发。 |
| nodeDblClick | node | 双击节点时触发。 |
| nodeExpand | node | 在展开节点时触发。 |
| nodeCollapse | node | 当节点被折叠时触发。 |
| nodeCheck | node | 检查节点时触发 |
| nodeUncheck | node | 当节点未选中时触发 |
| checkChange | nodes | 更改选中节点时触发。 |
| nodeContextMenu | node, originalEvent | 右击节点时触发。 |
| editBegin | {node, originalValue} | 在开始编辑节点时触发。 |
| editEnd | {node, originalValue} | 结束编辑节点时触发。 |
| editCancel | {node, originalValue} | 取消编辑节点时触发。 |
方法
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| selectNode | node | void | 选择一个节点。 |
| checkNode | node | void | 检查节点。 |
| uncheckNode | node | void | 取消一个节点。 |
| uncheckAllNodes | none | void | 取消所有节点。 |
| doFilter | q | void | 执行筛选操作 |
| beginEdit | node | void | 开始编辑节点。 |
| endEdit | none | void | 结束当前编辑节点。 |
| cancelEdit | none | void | 取消当前编辑节点。 |
Accordion(分类)
继承
none
用法
<Accordion style="height:250px">
<AccordionPanel :title="'Title1'">
<p>Content1</p>
</AccordionPanel>
<AccordionPanel :title="'Title2'">
<p>Content2</p>
</AccordionPanel>
<AccordionPanel :title="'Title3'">
<p>Content3</p>
</AccordionPanel>
</Accordion>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| border | boolean | 定义是否显示边框。 | true |
| multiple | boolean | 为True时展开多个面板。 | false |
| animte | boolean | 定义展开或折叠面板时是否显示动画效果。 | false |
| selectedIndex | number,array | 已初始化的选中面板索引。 | 0 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| panelSelect | panel | 选中面板时触发 |
| panelUnselect | panel | 未选中面板时触发。 |
方法
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| select | index | void | 选择指定的面板。 |
| unselect | index | void | 取消选择指定的面板。 |
| getPanel | index | AccordionPanel | 获得指定面板。 |
| getPanelIndex | panel | number | 获得指定面板索引。 |
| getSelectedIndex | none | number | 获取第一个选中面板的索引。 |
| getSelectedPanel | none | AccordionPanel | 获取第一个选中的面板。 |
| getSelectedPanels | none | AccordionPanel[] | 获取所有选中的面板 |
Messager(消息窗口)
继承
none
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| ok | string | 确定按钮文本。 | Ok |
| cancel | string | 取消按钮文本。 | Cancel |
| title | string | 消息标题。 | |
| msg | string | 要在对话框中显示的消息。 | |
| icon | string | 要在对话框上显示的图标类。 |
方法
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| alert | options | void | 显示警告消息对话框。 代码实例: this.$messager.alert({
title: "Info",
icon: "info",
msg: "Here is a info message!"
});
|
| confirm | options | void | 显示确认消息对话框。 代码实例: this.$messager.confirm({
title: "Confirm",
msg: "Are you confirm this?",
result: r => {
if (r) {
alert("confirmed: " + r);
}
}
});
|
| prompt | options | void | 显示提示消息对话框。 代码实例: this.$messager.prompt({
title: "Prompt",
msg: "Please type something",
result: r => {
if (r) {
alert("you type: " + r);
}
}
});
|
GridColumnGroup(表格列组)
继承
none
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| frozen | boolean | 定义是否冻结列组。 | false |
| align | string | 列组对齐方式。可选的值:'left','right'。 | left |
| width | number,string | 列组宽度。 | null |
ComboBox(下拉列表框)
继承
ComboBase
用法
<Label for="c1" align="top">选择一个值:</Label>
<ComboBox inputId="c1" v-model="value" :data="data"></ComboBox>
<p v-if="value">选择值: {
{value}}</p>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| value | string,number,array | 字段值。 | null |
| data | array | 要加载的数据。 | [] |
| valueField | string | 绑定到此组件的底层数据值名称。 | value |
| textField | string | 绑定到此组件的基础数据字段名。 | text |
| limitToList | boolean | 为True时,将输入值限制为列出的项。 | true |
| lazy | boolean | 定义是否延迟加载数据。 | false |
| virtualScroll | boolean | 定义是否启用虚拟滚动。 | false |
| rowHeight | number | 行高度,当virtualScroll设置为true时启用此属性。 | 30 |
| pageNumber | number | 设置virtualScroll属性时,初始化页码。 | 1 |
| pageSize | number | 设置virtualScroll属性时,初始化页面大小。 | 10 |
| total | number | 设置virtualScroll属性时,初始化总记录数。 | 0 |
作用域
| 名称 | 参数 | 描述 |
|---|---|---|
| item | row,rowIndex | 数据项的作用域。 |
事件
| 名称 | 参数 | 描述 |
|---|---|---|
| selectionChange | event | 更改选择时触发。 |
| filterChange | pageNumber, pageSize, filterValue | 当过滤器值更改时触发。 |
SubMenu(子菜单)
继承
none
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| menuCls | string | 菜单样式类。 | null |
| menuStyle | Object | 菜单内联样式。 | null |
| menuWidth | any | 菜单宽度。 | null |
TimeSpinner(时间微调框)
继承
SpinnerBase
用法
<TimeSpinner placeholder="Select a time"
v-model="time"
min="08:30"
max="18:10">
</TimeSpinner>
<p v-if="time">选择: {
{time}}</p>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| value | string | 字段值。 | null |
| min | string | 最小允许时间。 | null |
| max | string | 最大允许时间。 | null |
| increment | number | 单击微调按钮时增加值。 | 1 |
| highlight | number | 初始化突出显示的字段,0 =小时,1 =分钟 | 0 |
| format | string | 时间格式。 | HH:mm |
Form(基本表单)
继承
none
用法
<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
<div style="margin-bottom:20px">
<Label for="name" align="top">Name:</Label>
<TextBox inputId="name" name="name" v-model="user.name"></TextBox>
<div class="error">{
{getError('name')}}</div>
</div>
<div style="margin-bottom:20px">
<Label for="email" align="top">Email:</Label>
<TextBox inputId="email" name="email" v-model="user.email"></TextBox>
<div class="error">{
{getError('email')}}</div>
</div>
<div style="margin-bottom:20px">
<Label for="hero" align="top">Select a hero:</Label>
<ComboBox inputId=hero name="hero" :data="heroes" v-model="user.hero"></ComboBox>
<div class="error">{
{getError('hero')}}</div>
</div>
<div style="margin-bottom:20px">
<CheckBox inputId="accept" name="accept" v-model="user.accept"></CheckBox>
<Label for="accept">Accept Me</Label>
</div>
<div style="margin-bottom:20px">
<LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
</div>
</Form>
属性
| 名称 | 类型 | 描述 | 默认 |
|---|---|---|---|
| model | Object | 表单数据。 | null |
| rules | Ob |










