要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

 <テンプレート>
  <el-テーブル
   :data="テーブルデータ"
   スタイル="幅: 100%">
   <el-テーブル列
    プロパティ="日付"
    label="日付"
    幅="180">
   </el-table-column>
   <el-テーブル列
    プロパティ="名前"
    label="名前"
    幅="180">
   </el-table-column>
   <el-テーブル列
    prop="アドレス"
    label="住所">
   </el-table-column>
  </el-table>
 </テンプレート>

 <スクリプト>
  エクスポートデフォルト{
   データ（） {
    戻る {
     テーブルデータ: [{
      日付: '2016-05-02'、
      名前: 王小湖、
      住所: '上海市普陀区金沙江路1518号'
     }, {
      日付: '2016-05-04'、
      名前: 王小湖、
      住所: '上海市普陀区金沙江路1517号'
     }, {
      日付: '2016-05-01'、
      名前: 王小湖、
      住所: '上海市普陀区金沙江路1519号'
     }, {
      日付: '2016-05-03'、
      名前: 王小湖、
      住所: '上海市普陀区金沙江路1516号'
     }]
    }
   }
  }
 </スクリプト>

<テンプレート>
 <el-table :data="テーブルデータ" スタイル="幅: 100%">
  <template v-for="(item, key) in header">
   <el-テーブル列
    :key="キー"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
   >
   </el-table-column>
  </テンプレート>
 </el-table>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ（） {
  戻る {
   ヘッダー: [
    { プロパティ: "日付"、ラベル: "日付"、幅: "180" },
    { プロパティ: "名前"、ラベル: "名前"、幅: "180" },
    { プロパティ: "アドレス"、ラベル: "アドレス" }
   ]、
   テーブルデータ: [
    {
     日付: "2016-05-02",
     名前: 「王小湖」、
     住所：「上海市普陀区金沙江路1518号」
    },
    {
     日付: "2016-05-04",
     名前: 「王小湖」、
     住所：「上海市普陀区金沙江路1517号」
    },
    {
     日付: "2016-05-01",
     名前: 「王小湖」、
     住所：「上海市普陀区金沙江路1519号」
    },
    {
     日付: "2016-05-03",
     名前: 「王小湖」、
     住所：「上海市普陀区金沙江路1516号」
    }
   ]
  };
 }
};
</スクリプト>

<テンプレート>
 <el-テーブル
  empty-text="まだデータがありません"
  ref="テーブル"
  :data="テーブルリスト"
  国境
  ストライプ
  フィット
  現在の行をハイライト
  :height="テーブル内高さ"
  @selection-change="選択変更"
  @row-click="行クリック"
 >
  <!-- ボックスを選択 -->
  <el-テーブル列
   v-if="選択"
   タイプ="選択"
   固定="左"
   幅="55"
   align="center"
  />
  <テンプレート v-for="(itm, idx) ヘッダー内">
   <!-- 特殊処理列 -->
   <el-テーブル列
    v-if="itm.render"
    :key="idx​​"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :show-overflow-tooltip="itm.tooltip"
    最小幅="50"
   >
    <テンプレート スロット スコープ="スコープ">
     <ex-スロット
      :render="itm.render"
      :row="スコープ.行"
      :index="スコープ.$index"
      :column="itm"
     />
    </テンプレート>
   </el-table-column>
   <!-- 通常の列 -->
   <el-テーブル列
    v-else
    :key="idx​​"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :formatter="itm.formatter"
    :show-overflow-tooltip="itm.tooltip"
    最小幅="50"
   />
  </テンプレート>
 </el-table>
</テンプレート>

<スクリプト>
// カスタムコンテンツ用のコンポーネント var exSlot = {
 機能的: 真、
 小道具: {
  行: オブジェクト、
  レンダリング: 関数、
  インデックス: 番号、
  カラム： {
   タイプ: オブジェクト、
   デフォルト: null
  }
 },
 レンダリング: (h, コンテキスト) => {
  定数パラメータ = {
   行: context.props.row、
   インデックス: context.props.index
  };
  context.props.column の場合、params.column は context.props.column になります。
  context.props.render(h, params) を返します。
 }
};

エクスポートデフォルト{
 コンポーネント: { exSlot },
 小道具: {
  テーブルリスト: {
   タイプ: 配列、
   デフォルト: () => []
  },
  ヘッダー: {
   タイプ: 配列、
   デフォルト: () => []
  },
  選択: {
   タイプ: ブール値、
   デフォルト: () => false
  },
  身長：
   タイプ: [数値、文字列、関数],
   デフォルト: () => null
  }
 },
 データ（） {
  戻る {
   inTableHeight: null
  };
 },
 作成された() {
  // このステージは、親コンポーネントの渡されたパラメータを受け取ることができます。this.inTableHeight = this.height;
 },
 マウント() {
  this.$nextTick(() => {
   //テーブルの高さはブラウザのサイズに合わせて調整されます this.changeTableHight();
   if (!this.height) {
    ウィンドウのサイズ変更 = () => {
     テーブルの高さを変更します。
    };
   }
  });
 },
 破壊された() {
  // 高度に適応したイベントログアウト window.onresize = null;
 },
 時計：
  /**
   * データ変更後の適応性が高い */
  テーブルリスト() {
   this.$nextTick(() => {
    テーブルの高さを変更します。
   });
  }
 },
 メソッド: {
  /**
   * 選択ボックスを選択後、イベントの配信を変更 */
  選択変更(選択) {
   this.$emit("選択変更", 選択);
  },
  /**
   * クリックイベント */
  rowClick(行、列、イベント) {
   this.$emit("row-click", 行、列、イベント);
  },
  /**
   * 高さ調整可能* テーブルの表示スペースが460px未満の場合は460pxで表示されます。それより大きい場合は高さが埋められます*/
  テーブルの高さを変更する() {
   if (this.height) {
    // 高さが渡された場合は、適応をキャンセルします。this.inTableHeight = this.height;
    this.$refs.table.doLayout();
    戻る;
   }
   tableHeight を window.innerHeight || document.body.clientHeight とします。
   //高さの設定 let disTop = this.$refs.table.$el;
   // テーブルの上に要素がある場合は、ウィンドウに合わせてこれらの高さを減算します。66 は下の空白部分です。tableHeight -= disTop.offsetTop + 66;
   disTop.offsetParent の場合、テーブルの高さは disTop.offsetParent.offsetTop になります。
   this.inTableHeight = tableHeight < 460 ? 460 : tableHeight;
   //テーブルを再描画します this.$refs.table.doLayout();
  }
 }
};
</スクリプト>
<スタイル></スタイル>

<テンプレート>
 <div class="hello">
  <xd-table :table-list="テーブルデータ" :header="ヘッダー" 高さ="300"></xd-table>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 データ（） {
  戻る {
   ヘッダー: [
    { プロパティ: "w"、ラベル: "w" },
    { プロパティ: "x", ラベル: "x",
     フォーマッタ: (行) => {
      row.x.toFixed(3) を返します。
     },
    },
    { プロパティ: "d", ラベル: "d",
     フォーマッタ: (行) => {
      row.d.toFixed(2) を返します。
     },
    },
    {
     ラベル: "操作",
     レンダリング: (h, データ) => {
      戻る （
       <el-ボタン
        タイプ="プライマリ"
        クリックすると{() => {
         this.handleClick(データ行);
        }}
       >
        クリックすると行データを取得できます</el-button>
      );
     },
    },
   ]、
   テーブルデータ: [
    { 幅: 1, x: 99.25123, 奥行き: 0.23892 },
    { 幅: 1, x: 255.6666, 奥行き: 0.99134 },
   ]、
  };
 },
 メソッド: {
  ハンドルクリック(行) {
   コンソールログ(行);
  },
 },
};
</スクリプト>