Element UI的Table用法

Table 表格

用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。

¶基礎表格

基

2016-05-02	王小虎	上海市普陀區金沙江路 1518 弄
2016-05-04	王小虎	上海市普陀區金沙江路 1517 弄
2016-05-01	王小虎	上海市普陀區金沙江路 1519 弄
2016-05-03	王小虎	上海市普陀區金沙江路 1516 弄

當el-table元素中注入data對象數組后，在el-table-column中用prop屬性來對應對象中的鍵名即可填入數據，用label屬性來定義表格的列名。可以使用width屬性來定義列寬。

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

縱向內容過多時，可選擇固定表頭：只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。

常用API：

data：顯示的數據；

stripe：是否顯示斑馬紋；

max-height ：Table 的最大高度

height：Table 的高度，默認為自動高度。如果 height 為 number 類型，單位 px；如果 height 為 string 類型，則這個高度會設置為 Table 的 style.height 的值，Table 的高度會受控於外部樣式。

border：是否帶有縱向邊框。