寫在前面的

   由於SIMATIC內部的框架有很多，前後端自成一家。不過前端大部分還是使用了vue。以前也聽說過.NET版本的前後端分離，但也僅僅侷限於聽說，這次可是親身體會到了，對比JAVA，我只能說。。。扎心了老鐵們。雖然.NET有微軟天生的優勢，但是有時候也會捉襟見肘，在只有ASP.NET WEB SERVICE規範和基礎框架以及在不使用WCF核心的情況下，框架的效率就要比JAVA的各種框架低很多了。多說無益，還是繼續來分享Table元件吧。

iView

   首先，需要了解一下什麼是iView。它是一套基於 Vue.js 的高質量 UI 元件庫，這裡需要補充一點，由於ANGULAR2的元件庫雖然非常的強大，但是在學習路線的長度上，iView還是有著不少優勢的，總的來說，就是比較好上手，也是非常穩定和好用。

Tables

基礎表格

• 首先我們來看一下最最基礎的表格。
  

<!--表格模板-->
<template>
    <!--:columns來進行表格表頭的繫結，即每列顯示什麼內容；:data來進行資料的繫結，即，表格中所對應的每列的資料是什麼-->
    <Table :columns="columns1" :data="data1"></Table>
</template>
<script>
    export default
 
 {
        data () {
            return {
            //在指令碼中，我們在表格中定義的資料和表頭都需要在這裡進行繫結，下面是一些假資料，其中Columns1中的title表示列明，key表示K-V中的標識
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age'
 
,
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                //接下來繫結資料，分別對應前面的列的key值來進行資料繫結
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

雙向資料繫結

• 接下來就是對錶格中的資料進行雙向綁定了，過程很簡單，使用axios向伺服器傳送請求然後接受返回值即可。

<!--關於表格的屬性官方介紹中都包含，請自行參考-->
<!--:columns所對應的是script中的columnsdata,:data對應指令碼中宣告的data-->
<Table height="400"  size="small" :columns="columnsdata" :stripe="true" :data="data" border ></Table>

<script>
export default {
        data () {
            return {
                columnsdata: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                //宣告一個data，用來儲存服務返回的資料值
                 data:[]
 }


 methods: {

    querytable(){
      axios.post("這裡輸入請求地址", "這裡輸入所需要向後臺傳遞的物件引數，沒有也可以不寫")//post也可以改成get，但需要對應服務端的請求方法
          .then(function (response) {
          //將返回的資料存入頁面中宣告的data中
            this.data = response.data;
          })
          .catch(function (error) {
            alert(error);
          });
  },
  //當頁面載入的時候執行
     created () {
        querytable();
    }
 }
 </script>