EasyUI for Vue

Based on vue-easyui code, some additional features will be added. For this version, add rowCss, cellCss, and treeIndex for the treeGrid.

vx-easyui: 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 ws-easyui --save

2. Import EasyUI files.

Import the EasyUI files to your main.js file.

1import 'ws-easyui/dist/themes/default/easyui.css';
2import 'ws-easyui/dist/themes/icon.css';
3import 'ws-easyui/dist/themes/vue.css';
4import EasyUI from 'ws-easyui';
5import locale from 'ws-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    <TreeGrid 
4      :data="tableData"
5      idField="id"
6      treeField="id"
7      :rowCss="getRowCss"
8      columnResizing
9      style="height:250px">
10      <GridColumn title="序号">
11        <template slot="body" slot-scope="scope">
12          {{ scope.treeIndex }}
13        </template>
14      </GridColumn>
15      <GridColumn field="id" title="编号ID"></GridColumn>
16      <GridColumn field="name" title="名称" :cellCss="getCellCss"></GridColumn>
17      <GridColumn field="price" title="单价（元）" align="right"></GridColumn>
18      <GridColumn field="count" title="数量" align="right"></GridColumn>
19    </TreeGrid>
20  </div>
21</template>
22<script>
23export default {
24  data() {
25    return {
26      tableData: [
27        {
28          id: '001',
29          name: '水果',
30          price: 0,
31          count: 0,
32          children: [
33            {
34              id: '002',
35              name: '苹果',
36              price: 5,
37              count: 10
38            },
39            {
40              id: '003',
41              name: '香蕉',
42              price: 3,
43              count: 15
44            },
45            {
46              id: '004',
47              name: '橘子',
48              price: 2.98,
49              count: 7
50            }
51          ]
52        },
53      ]
54    }
55  },
56  methods: {
57    // row 样式
58    getRowCss(row) {
59      if (row.id === "001") {
60        return { background: "#b8eecf", fontSize: "14px", fontStyle: "italic" };
61      }
62      return null;
63    },
64    // cell 样式
65    getCellCss(row, value) {
66      if (value === "苹果") {
67        return { color: "red" };
68      }
69      return null;
70    }
71  }
72}
73</script>