Components of rendering pure form vue - no interaction event

Component 
Name lowercase == "with - link

 02 ===> 
Properties ==> empty-text =" No Data "   no data is displayed if no data table
   <EL-the table- column 
      V - for =" Item tabColumn in " 
      : Key =" item.prop " 
      : prop =" item.prop " 
      : label =" item.label " 
      : width =" item.width " 
      : align = left =" item.align " 
      empty -text =" no data " 
      > 
    </ EL-Table-column> 

 03 ==>: align = left =" item.align "is centered manner with a left center right

 

Components .vue

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column
      v-for="item in tabColumn"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :align="item.align"
      empty-text="暂无数据"
    ></el-table-column>
  </el-table>
</template>


<script>
export default {
  props:{ 
    Array types//
      type: the Array,    TableData: {the passed value//

      required: to true  // must value 
    }, 

    //   array fields style 
    tabColumn: { 
      type: the Array, 
      required: to true 
    } 
  }, 

  Data () { 
    return {}; 
  } 
};
 </ Script>

 

Using Components page (parent)

<template>
  <div>
    <mytab :tableData="tableData" :tabColumn="tabColumn"></mytab>
  </div>
</template>

<script>
import mytab from "../../../components/my-tab";
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市 1518 弄",
          "tel":"18383838",
        },
        {
          date: "2016-05-04",
          name: "小玩法",
          address: "上海市普陀1517 弄",
          "tel":"18383838",

        },
        {
          date: "2016-05-01",
          name: "王小",
          address: "上海市普陀1519 弄",
          "tel":"18383838",

        },
        {
          date: "2016-05-03",
          name: "王虎",
          address: "上海市普陀区1516 弄",
          "tel":"18383838",

        }
      ],

    // 字段数组
     tabColumn: [{
          prop: 'date',
          label: '日期',
          width: '180',
          align:'left',
        }, {
          prop: 'name',
          label: '姓名',
          width: '180',
          align:'center',
        }, {
           prop: 'address',
          label: '地址',
          width: '180',
          align:'center',
        },
         {
           prop: 'tel',
          label: '电话',
          width: '180',
          align:'center',
        }
        ],


    };
  },

  components: {
    mytab
  }
};
</script>