2021-08-06

1 官网

• https://element-plus.org/#/zh-CN/component/quickstart
• https://element-plus.gitee.io/#/zh-CN 国内

2 新建项目

• vue create yxpower_vue3_1
  》创建过程中选项 选择 Manually select features
  》创建过程中选项 选择Babel，Router, Vuex
  》创建过程中选项 选择版本3.X
  》创建过程中选项 选择history mode for router
  》创建过程中选项 选择In dedicated config files
  》创建过程中选项 如果保存选择，则对 Save this as a preset for future project 选择yes

• 最后提示
  $ cd yxpower_vue3_1
  $ npm run serve
  运行

3 安装插件

• npm i element-plus --save 或者npm i element-ui -S
• npm i axios -S

4 修改代码

4.1 main.js 修改

• import ElementUI from ‘element-ui’
• import axios from “axios”;
• import ‘element-plus/dist/index.css’;

后面比较重要

• const app =createApp(App).use(store).use(router).use(ElementUI)
• app.mount(’#app’)
• app.config.globalProperties.$axios = axios

4.2 src/components下增加Table.vue

• 增加按钮
• 增加table和分页

<template>
    <div>
    <H1 >Table</H1>
    <button @click="getData" style="width: 150px;height: 150px;">Table button</button>
    <el-table :data="tabledata" style=" width:100%" >
        <el-table-column prop="one" lable="one"> </el-table-column>
        <el-table-column prop="two" lable="two" > </el-table-column>
        <el-table-column prop="three" lable="three" > </el-table-column>
        <el-table-column prop="four" lable="four" > </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="sizes, prev, pager, next"
            :total="50">
    </el-pagination>
    </div>

• 增加处理脚本

<script>
    export default {
        name: "Table",
        data() {
            return {
                currentPage:0,
                tabledata: [
                ]
            }
        },
        activated() {
            this.getData()
        },
        methods:{
            getData(){
                // console.log("axios 测试")
                //let url='gettabledata'
                //this.$axios.get(url,{
                //}).then(function (response) {
                //    // this.list = response.data
                //    console.log("response:" + response)
                //}).catch(function (error){
                //    console.log("error:"+error)
                //});

                let url='http://localhost:7999/isa-mes/sys/menu/nav'
                let that = this;

                this.$axios.get(url,{
                }).then( (response)=>{
                    let list = response.data;
                    console.log("response:" ,response.data)
                    console.log("list:" ,list)

                    console.log(this,this.currentPage);
                     this.currentPage = list.currentPage;
                     for(let a=0;a<list.tabledata.length;a++){
                         this.tabledata.push(list.tabledata[a]);
                     }
                    console.log("this.tabledata:",this.tabledata);
                    // <!--{currentPage:1,-->
                    // <!--tabledata: [-->
                    // <!--    {one: '1', two: '2', three: '3', four: '4'}  ,-->
                    // <!--    {one: '1', two: '2', three: '3', four: '4'}-->
                    // <!--]-->
                    // <!--}-->
                }).catch( (error)=>{
                    console.log("error:"+error)
                });
                },
            }
        }

</script>

4.3 修改src/router/index.js

• import Table from “…/components/Table”;
• 增加如下脚本
  ,
  {
  path: ‘/table’,
  name: ‘Table’,
  component: Table
  }

4.4 修改App.vue增加内容Table.vue到主页

注意增加分隔符
《router-link to="/table"》Table《/router-link》

5 增加后台处理

这里在C++文件里，boost处理http的部分，增加如下响应：

	else
	if (hierarchy == "isa-mes\\sys\\menu\\nav") {  //http://localhost:8086/isa-mes/sys/menu/nav
		report = "{\"currentPage\":1,\"tabledata\": [{\"one\": 1, \"two\": 2, \"three\": 3, \"four\": 4}  ,{\"one\": 1, \"two\": 2, \"three\": 3, \"four\": 4}]}";
		return NEXT_TO_AJAX;
	}

将以上内容推送到页面

6 运行测试

每点击一次按钮，后台推送一条数据，页面push到缓冲区list，然后同步到table显示，结果如下：