VUE集成EasyUI

- 日理万妓 2022-01-23 06:23 478阅读 0赞

EasyUI是非常成熟前端框架，它对VUE支持也非常完善，参考其中文官网也非常容易入手http://www.jeasyui.cn与官网http://www.jeasyui.com，参照如下步骤开始使用EasyUI-VUE

## 1、使用Eclipse的CodeMix插件创建VUE工程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

## 2、使用NPM安装vx-easyui程序包 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]  
在项目所在目录运行  
npm install vx-easyui --save

## 3、在VUE工程的main.js中引入Easyui ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]

## 4、修改HelloWorld.vue文件 ##

引入EasyUI datagrid和tree

<template>
        <Layout style="width:100%;height:100%;">
            <LayoutPanel region="north" style="height:50px;">
                <div class="title">North Region</div>
            </LayoutPanel>
            <LayoutPanel region="south" style="height:50px;">
                <div class="title">South Region</div>
            </LayoutPanel>
            <LayoutPanel region="west" style="width:200px;">
                <div class="title">
    
    		        <h2>导航</h2>
    		        <Tree :data="treedata" @selectionChange="selection=$event"></Tree>
    		    <p v-if="selection">Selected: {
       {selection.text}}</p>
    
                </div>
            </LayoutPanel>
            <LayoutPanel region="center" style="height:100%">
                <div class="title">
    
            <div style="margin-bottom:10px">
                <Label for="c1">Pager on: </Label>
                <ComboBox inputId="c1" style="width:120px"
                        :data="pageOptions" 
                        v-model="pagePosition" 
                        :editable="false"
                        :panelStyle="{height:'auto'}">
                </ComboBox>
            </div>
            <DataGrid style="height:100%"
                    :pagination="true"
                    :data="data"
                    :total="total"
                    :pageSize="pageSize"
                    :pagePosition="pagePosition">
                <GridColumn field="inv" title="Inv No"></GridColumn>
                <GridColumn field="name" title="Name"></GridColumn>
                <GridColumn field="amount" title="Amount" align="right"></GridColumn>
                <GridColumn field="price" title="Price" align="right"></GridColumn>
                <GridColumn field="cost" title="Cost" align="right"></GridColumn>
                <GridColumn field="note" title="Note"></GridColumn>
            </DataGrid>
    
                </div>
            </LayoutPanel>
        </Layout>
      </div>
    </template>
     
    <script>
    export default {
      data() {
        return {
          total: 10000,
          pageSize: 20,
          data: [],
          pagePosition: "bottom",
          pageOptions: [
            { value: "bottom", text: "Bottom" },
            { value: "top", text: "Top" },
            { value: "both", text: "Both" }
          ],
          treedata: this.getTreeData()
        };
      },
      created() {
        this.data = this.getData(this.total);
      },
      methods: {
        getData(total) {
          let data = [];
          for (let i = 1; i <= total; i++) {
            let amount = Math.floor(Math.random() * 1000);
            let price = Math.floor(Math.random() * 1000);
            data.push({
              inv: "Inv No " + i,
              name: "Name " + i,
              amount: amount,
              price: price,
              cost: amount * price,
              note: "Note " + i
            });
          }
          return data;
        },
    
        getTreeData() {
          return [
            {
              id: 1,
              text: "My Documents",
              children: [
                {
                  id: 11,
                  text: "Photos",
                  state: "closed",
                  children: [
                    {
                      id: 111,
                      text: "Friend"
                    },
                    {
                      id: 112,
                      text: "Wife"
                    },
                    {
                      id: 113,
                      text: "Company"
                    }
                  ]
                },
                {
                  id: 12,
                  text: "Program Files",
                  children: [
                    {
                      id: 121,
                      text: "Intel"
                    },
                    {
                      id: 122,
                      text: "Java"
                    },
                    {
                      id: 123,
                      text: "Microsoft Office"
                    },
                    {
                      id: 124,
                      text: "Games"
                    }
                  ]
                },
                {
                  id: 13,
                  text: "index.html"
                },
                {
                  id: 14,
                  text: "about.html"
                },
                {
                  id: 15,
                  text: "welcome.html"
                }
              ]
            }
          ];
        }
    
      }
    };
    </script>
    <style>
    .title {
      text-align: center;
      margin-top: 10px;
    }
    </style>

## 5、启动VUE项目 ##

npm run serve

## 6、浏览器测试 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20220123/bdfa9805b3f94fcca424e937080199b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]: /images/20220123/e76ccf4d40e0483e826668cecf121683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]: /images/20220123/c7936034435247a3ad02dc7ebac0c45b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]: /images/20220123/ed185c97b4504c61871c4f780c6c9e9a.png