包括：（程式碼中都有具體用法）

固定列和表頭： fixed

表格的最大高度： max-height

高亮當前行：highlight-current-row

首列增加索引：type="index" 自定義索引的話再加 :index="indexMethod"

刪除行： deleteRow

某一行/單元格 新增 class：row-class-name / cell-class-name

管理選中行時觸發的事件：@current-change="handleCurrentChange"

選中某行：setCurrentRow

多選：type="selection" （具體看element官網）

排序：sortable

格式化指定列的值：formatter

在表格裡插入其他元素：Scoped slot （可以獲取到 row, column, $index 和 store（table 內部的狀態管理）的資料）

新增合計行：show-summary， 具體合計的方法再新增:summary-method="getSummaries"

單元格/行的樣式：cell-style row-style

單元格/行的點選等事件看官網即可

程式碼：

<template>
<div>
  <el-table
    :data="tableData"
    ref="singleTable"
    style="width: 100%"
    max-height="250"
    :row-class-name="tableRowClassName"
    highlight-current-row
    @current-change="handleCurrentChange"
    :default-sort = "{prop: 'date', order: 'descending'}"
    show-summary
    :summary-method="getSummaries"
    :cell-style="setCellStyle">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      type="index"
      :index="indexMethod"
      width="50">
    </el-table-column>
    <el-table-column
      fixed
      sortable
      prop="date"
      label="日期"
      width="150">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      sortable
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市區"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="郵編"
      width="120"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="數值 1">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[2])">選中第二行</el-button>
    <el-button @click="setCurrent()">取消選擇</el-button>
  </div>
  <!-- <svg-icon iconClass="phone"></svg-icon> -->
</div>

</template>
<script>
export default {
  methods: {
    indexMethod (index) {
      return index * 2
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    // 設定列樣式
    setCellStyle ({row, column, rowIndex, columnIndex}) {
      if (column.property === 'city') return 'color: #409EFF;cursor:pointer;'
    },
    formatter (row, column) {
      if (row.zip === 200334) {
        console.log(row, column)
        // row.zip = 1   // 要return才能實現
        return 1
      } else {
        return 200333
      }
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合計'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200334,
        amount1: '234'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '165'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '324'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '621'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀區',
        address: '上海市普陀區金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }],
      currentRow: null
    }
  }
}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

　　附一張效果圖，有點醜：