Download EasyUI for Vue 1.1

The EasyUI framework helps you build your web pages easily.

ChangeLog

Bug

Pagination: The page state does not refresh when 'total' property is changed. fixed.
ComboBase: The document 'click' event does not been unbind before destroy. fixed.
GridBase: The header doesn't display when created in a hidden tab panel. fixed.
Form: The validate callback function does not fire when the field does not assign a rule. fixed.

Improvement

DomHelper: Add the callback function to the 'slideUp' and 'slideDown' methods.
DataGrid: Add the row grouping with pagination feature.
ComboGrid: Add the filtering functionality.
ComboGrid: Allows the user to navigate rows with the keyboard.
Tree: Add editable functionality.

New Plugins

DateTimeBox: The DateTimeBox component allows the user to select a date and a time.
FileButton: The FileButton component allows the user to select files to upload to server.

Installation

1. Install EasyUI based on Vue 2.x

1.1. Use the NPM to install.

1.2. Import EasyUI files.

Import the EasyUI files to your main.js file.

2. Install EasyUI based on Vue 3.x

2.1. Use the NPM to install.

2.2. Import EasyUI files.

Import the EasyUI files to your main.js file.

3. Import the components to your '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>

Licenses

Freeware Edition

The Freeware Edition is available under Freeware License, you can use it in any freeware-licensed projects.

Commercial Edition

The Commercial Edition is also available under Commercial License, you can use it in a commercial project.

Purchase