EasyUI for Vue

This software is allowed to use under freeware license or you need to buy commercial license for better support or other purpose. Please contact us at info@jeasyui.com

The live examples can be obtained at

https://www.jeasyui.com/demo-vue/main/index.php

Introduction

1. Installation

1 npm install vx-easyui --save

2. Import EasyUI files.

Import the EasyUI files to your main.js file.

1import 'vx-easyui/dist/themes/default/easyui.css';
2import 'vx-easyui/dist/themes/icon.css';
3import 'vx-easyui/dist/themes/vue.css';
4import EasyUI from 'vx-easyui';
5import locale from 'vx-easyui/dist/locale/easyui-lang-en'
6Vue.use(EasyUI, {
7    locale: locale
8});

3. Import the components to your 'App.vue'.

1<template>
2    <div>
3        <DataGrid :data="data" style="height:250px">
4            <GridColumn field="itemid" title="Item ID"></GridColumn>
5            <GridColumn field="name" title="Name"></GridColumn>
6            <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
7            <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
8            <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
9            <GridColumn field="status" title="Status" align="center"></GridColumn>
10        </DataGrid>
11    </div>
12</template>
13<script>
14    export default {
15        data() {
16            return {
17                data: [
18                    {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
19                    {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
20                    {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
21                    {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
22                    {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
23                    {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
24                    {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
25                    {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
26                    {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
27                    {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
28                ]
29            }
30        }
31    }
32</script>