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

 npm install ws-easyui --save

2. Import EasyUI files.

Import the EasyUI files to your main.js file.

import 'ws-easyui/dist/themes/default/easyui.css';
import 'ws-easyui/dist/themes/icon.css';
import 'ws-easyui/dist/themes/vue.css';
import EasyUI from 'ws-easyui';
import locale from 'ws-easyui/dist/locale/easyui-lang-en'
Vue.use(EasyUI, {
    locale: locale
});

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

<template>
  <div>
    <TreeGrid 
      :data="tableData"
      idField="id"
      treeField="id"
      :rowCss="getRowCss"
      columnResizing
      style="height:250px">
      <GridColumn title="序号">
        <template slot="body" slot-scope="scope">
          {{ scope.treeIndex }}
        </template>
      </GridColumn>
      <GridColumn field="id" title="编号ID"></GridColumn>
      <GridColumn field="name" title="名称" :cellCss="getCellCss"></GridColumn>
      <GridColumn field="price" title="单价（元）" align="right"></GridColumn>
      <GridColumn field="count" title="数量" align="right"></GridColumn>
    </TreeGrid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '001',
          name: '水果',
          price: 0,
          count: 0,
          children: [
            {
              id: '002',
              name: '苹果',
              price: 5,
              count: 10
            },
            {
              id: '003',
              name: '香蕉',
              price: 3,
              count: 15
            },
            {
              id: '004',
              name: '橘子',
              price: 2.98,
              count: 7
            }
          ]
        },
      ]
    }
  },
  methods: {
    // row 样式
    getRowCss(row) {
      if (row.id === "001") {
        return { background: "#b8eecf", fontSize: "14px", fontStyle: "italic" };
      }
      return null;
    },
    // cell 样式
    getCellCss(row, value) {
      if (value === "苹果") {
        return { color: "red" };
      }
      return null;
    }
  }
}
</script>