対話なしイベント - 純粋な形のVUEをレンダリングするコンポーネント

コンポーネント
名小文字 ==「と- リンク

 02 ===> 
プロパティ ==>空のテキスト=」データなし「  ノーデータテーブル場合はデータは表示されません
  。<EL-卓上列
      V - のために =」項目でtabColumn " 
      ：キー =" item.prop " 
      ：小道具は =" item.prop " 
      ：ラベル =" item.label " 
      ：幅 =" item.width " 
      ：左=揃える =" item.align " 
      空 -text ="なしデータ" 
      > 
    </ EL-表カラム> 

 03 ==>：ALIGN = =左"左中央と方法を中心とする」item.align右

 

コンポーネント.vue

<テンプレート> 
  <EL-テーブル：データ= "たtableData"ストライプスタイル= "幅：100％"> 
    <EL-卓上列
      V - のため = "tabColumnの項目" 
      ：キー = "item.prop" ：
      プロペラ =」 item.prop」
      ：ラベル = "item.label" 
      ：幅 = "item.width" 
      ：整列 = "item.align" 
      空 -text = "暂无数据" 
    > </ EL-テーブル列> 
  </ IL-テーブル> 
</テンプレート> 


<スクリプト> 
輸出デフォルト{ 
  小道具：{ 
    // 渡された値
    TABLEDATA：{ 
      型：Array、// 配列型
      必須：trueに // 重視しなければならない
    } 

    //   アレイフィールドスタイル
    tabColumn：{ 
      型：Array、
      必要：真へ
    } 
  }、

  データ（）{ 
    リターン{}; 
  } 
};
 </ SCRIPT>

 

コンポーネント]ページを使用した（親）

<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>