Vue EasyUI插件学习笔记（基础）详细版-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue EasyUI插件学习笔记（基础）详细版。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

安装步骤

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); } } });

名称

参数

返回值

描述

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>

属性文章来源地址https://www.toymoban.com/news/detail-851723.html