ElementPlus Table 表格

2021-09-26 10:29 更新

Table 表格

用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。

基礎(chǔ)表格

基礎(chǔ)的表格展示用法。


當(dāng) el-table 元素中注入 data 對(duì)象數(shù)組后，在 el-table-column 中用 prop 屬性來對(duì)應(yīng)對(duì)象中的鍵名即可填入數(shù)據(jù)，用 label 屬性來定義表格的列名?？梢允褂?nbsp;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: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
          },
        ],
      }
    },
  }
</script>

帶斑馬紋表格

使用帶斑馬紋的表格，可以更容易區(qū)分出不同行的數(shù)據(jù)。


stripe 屬性可以創(chuàng)建帶斑馬紋的表格。它接受一個(gè) Boolean，默認(rèn)為 false，設(shè)置為 true 即為啟用。 


<template>
  <el-table :data="tableData" stripe 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: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
          },
        ],
      }
    },
  }
</script>

帶邊框表格


默認(rèn)情況下，Table 組件是不具有豎直方向的邊框的，如果需要，可以使用 border 屬性，它接受一個(gè) Boolean，設(shè)置為 true 即可啟用。

<template>
  <el-table :data="tableData" border 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: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
          },
        ],
      }
    },
  }
</script>

帶狀態(tài)表格

可將表格內(nèi)容 highlight 顯示，方便區(qū)分「成功、信息、警告、危險(xiǎn)」等內(nèi)容。


可以通過指定 Table 組件的 row-class-name 屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <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 {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
    },
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
        ],
      }
    },
  }
</script>
<style>
  .el-table .warning-row {
    --el-table-tr-background-color: var(--el-color-warning-lighter);
  }
  .el-table .success-row {
    --el-table-tr-background-color: var(--el-color-success-lighter);
  }
</style>

固定表頭

縱向內(nèi)容過多時(shí)，可選擇固定表頭。


只要在 el-table 元素中定義了 height 屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。

<template>
  <el-table :data="tableData" height="250" border 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-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
        ],
      }
    },
  }
</script>

固定列

橫向內(nèi)容過多時(shí)，可選擇固定列。


固定列需要使用 fixed 屬性，它接受 Boolean 值或者 left right，表示左邊固定還是右邊固定。 


<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="date" label="日期" width="150">
    </el-table-column>
    <el-table-column 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="市區(qū)" width="120"> </el-table-column>
    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
    <el-table-column prop="zip" label="郵編" width="120"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small"
          >查看</el-button
        >
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row)
      },
    },

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

固定列和表頭

橫縱內(nèi)容過多時(shí)，可選擇固定列和表頭。


固定列和表頭可以同時(shí)使用，只需要將上述兩個(gè)屬性分別設(shè)置好即可。

<template>
  <el-table :data="tableData" style="width: 100%" height="250">
    <el-table-column fixed prop="date" label="日期" width="150">
    </el-table-column>
    <el-table-column 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="市區(qū)" width="320"> </el-table-column>
    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
    <el-table-column prop="zip" label="郵編" width="120"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
        ],
      }
    },
  }
</script>

流體高度

當(dāng)數(shù)據(jù)量動(dòng)態(tài)變化時(shí)，可以為 Table 設(shè)置一個(gè)最大高度。


通過設(shè)置 max-height 屬性為 Table 指定最大高度。此時(shí)若表格所需的高度大于最大高度，則會(huì)顯示一個(gè)滾動(dòng)條。

<template>
  <el-table :data="tableData" style="width: 100%" max-height="250">
    <el-table-column fixed prop="date" label="日期" width="150">
    </el-table-column>
    <el-table-column 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="市區(qū)" width="120"> </el-table-column>
    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
    <el-table-column prop="zip" label="郵編" width="120"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          @click.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small"
        >
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
    },
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
        ],
      }
    },
  }
</script>

多級(jí)表頭

數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候，可使用多級(jí)表頭來展現(xiàn)數(shù)據(jù)的層次關(guān)系。


只需要在 el-table-column 里面嵌套 el-table-column，就可以實(shí)現(xiàn)多級(jí)表頭。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"> </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column label="地址">
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市區(qū)" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="zip" label="郵編" width="120"> </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
          },
        ],
      }
    },
  }
</script>

單選

選擇單行數(shù)據(jù)時(shí)使用色塊表示。


Table 組件提供了單選的支持，只需要配置 highlight-current-row 屬性即可實(shí)現(xiàn)單選。之后由 current-change 事件來管理選中時(shí)觸發(fā)的事件，它會(huì)傳入 currentRow，oldCurrentRow。如果需要顯示索引，可以增加一列 el-table-column，設(shè)置 type 屬性為 index 即可顯示從 1 開始的索引號(hào)。

<template>
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%"
  >
    <el-table-column type="index" width="50"> </el-table-column>
    <el-table-column property="date" label="日期" width="120">
    </el-table-column>
    <el-table-column property="name" label="姓名" width="120">
    </el-table-column>
    <el-table-column property="address" label="地址"> </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">選中第二行</el-button>
    <el-button @click="setCurrent()">取消選擇</el-button>
  </div>
</template>

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

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row)
      },
      handleCurrentChange(val) {
        this.currentRow = val
      },
    },
  }
</script>

多選

選擇多行數(shù)據(jù)時(shí)使用 Checkbox。


實(shí)現(xiàn)多選非常簡單: 手動(dòng)添加一個(gè) el-table-column，設(shè) type 屬性為 selection 即可；默認(rèn)情況下若內(nèi)容過多會(huì)折行顯示，若需要單行顯示可以使用 show-overflow-tooltip 屬性，它接受一個(gè) Boolean，為 true 時(shí)多余的內(nèi)容會(huì)在 hover 時(shí)以 tooltip 的形式顯示出來。

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column label="日期" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >切換第二、第三行的選中狀態(tài)</el-button
    >
    <el-button @click="toggleSelection()">取消選擇</el-button>
  </div>
</template>

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

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    },
  }
</script>

排序

對(duì)表格進(jìn)行排序，可快速查找或?qū)Ρ葦?shù)據(jù)。


在列中設(shè)置 sortable 屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序，接受一個(gè) Boolean，默認(rèn)為 false?？梢酝ㄟ^ Table 的 default-sort 屬性設(shè)置默認(rèn)的排序列和排序順序?？梢允褂?nbsp;sort-method 或者 sort-by 使用自定義的排序規(guī)則。如果需要后端排序，需將 sortable 設(shè)置為 custom，同時(shí)在 Table 上監(jiān)聽 sort-change 事件，在事件回調(diào)中可以獲取當(dāng)前排序的字段名和排序順序，從而向接口請(qǐng)求排序后的表格數(shù)據(jù)。在本例中，我們還使用了 formatter 屬性，它用于格式化指定列的值，接受一個(gè) Function，會(huì)傳入兩個(gè)參數(shù)：row 和 column，可以根據(jù)自己的需求進(jìn)行處理。 

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column prop="date" label="日期" sortable width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址" :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

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

篩選

對(duì)表格進(jìn)行篩選，可快速查找到自己想看的數(shù)據(jù)。


在列中設(shè)置 filters filter-method 屬性即可開啟該列的篩選，filters 是一個(gè)數(shù)組，filter-method 是一個(gè)方法，它用于決定某些數(shù)據(jù)是否顯示，會(huì)傳入三個(gè)參數(shù)：value, row 和 column。

<template>
  <el-button @click="resetDateFilter">清除日期過濾器</el-button>
  <el-button @click="clearFilter">清除所有過濾器</el-button>
  <el-table
    row-key="date"
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="標(biāo)簽"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions
          >{{scope.row.tag}}</el-tag
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            tag: '家',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
            tag: '公司',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            tag: '家',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
            tag: '公司',
          },
        ],
      }
    },
    methods: {
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date')
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter()
      },
      formatter(row, column) {
        return row.address
      },
      filterTag(value, row) {
        return row.tag === value
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      },
    },
  }
</script>

自定義列模板

自定義列的顯示內(nèi)容，可組合其他組件使用。


通過 slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)，用法參考 demo。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
          </template>
          <template #reference>
            <div class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >編輯</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >刪除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

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

展開行

當(dāng)行內(nèi)容過多并且不想顯示橫向滾動(dòng)條時(shí)，可以使用 Table 展開行功能。


通過設(shè)置 type="expand" 和 slot 可以開啟展開行功能，el-table-column 的模板會(huì)被渲染成為展開行的內(nèi)容，展開行可訪問的屬性與使用自定義列模板時(shí)的 slot 相同。 

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名稱">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所屬店鋪">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店鋪 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分類">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店鋪地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="商品 ID" prop="id"> </el-table-column>
    <el-table-column label="商品名稱" prop="name"> </el-table-column>
    <el-table-column label="描述" prop="desc"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
            address: '上海市普陀區(qū)真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
          },
          {
            id: '12987123',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
            address: '上海市普陀區(qū)真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
          },
          {
            id: '12987125',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
            address: '上海市普陀區(qū)真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
          },
          {
            id: '12987126',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
            address: '上海市普陀區(qū)真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
          },
        ],
      }
    },
  }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

樹形數(shù)據(jù)與懶加載


支持樹類型的數(shù)據(jù)的顯示。當(dāng) row 中包含 children 字段時(shí)，被視為樹形數(shù)據(jù)。渲染樹形數(shù)據(jù)時(shí)，必須要指定 row-key。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。設(shè)置 Table 的 lazy 屬性為 true 與加載函數(shù) load 。通過指定 row 中的 hasChildren 字段來指定哪些行是包含子節(jié)點(diǎn)。children 與 hasChildren 都可以通過 tree-props 配置。

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: 1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            id: 2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
          },
          {
            id: 3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            children: [
              {
                id: 31,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄',
              },
              {
                id: 32,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄',
              },
            ],
          },
          {
            id: 4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
          },
        ],
        tableData1: [
          {
            id: 1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            id: 2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
          },
          {
            id: 3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            hasChildren: true,
          },
          {
            id: 4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
          },
        ],
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀區(qū)金沙江路 1519 弄',
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀區(qū)金沙江路 1519 弄',
            },
          ])
        }, 1000)
      },
    },
  }
</script>

自定義表頭

表頭支持自定義。


通過設(shè)置 slot 來自定義表頭。

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
  >
    <el-table-column label="Date" prop="date"> </el-table-column>
    <el-table-column label="Name" prop="name"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="輸入關(guān)鍵字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

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

表尾合計(jì)行

若表格展示的是各類數(shù)字，可以在表尾顯示各列的合計(jì)。


將 show-summary 設(shè)置為 true 就會(huì)在表格尾部展示合計(jì)行。默認(rèn)情況下，對(duì)于合計(jì)行，第一列不進(jìn)行數(shù)據(jù)求合操作，而是顯示「合計(jì)」二字（可通過 sum-text 配置），其余列會(huì)將本列所有數(shù)值進(jìn)行求合操作，并顯示出來。當(dāng)然，你也可以定義自己的合計(jì)邏輯。使用 summary-method 并傳入一個(gè)方法，返回一個(gè)數(shù)組，這個(gè)數(shù)組中的各項(xiàng)就會(huì)顯示在合計(jì)行的各列中，具體可以參考本例中的第二個(gè)表格。 

<template>
  <el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="amount1" sortable label="數(shù)值 1"> </el-table-column>
    <el-table-column prop="amount2" sortable label="數(shù)值 2"> </el-table-column>
    <el-table-column prop="amount3" sortable label="數(shù)值 3"> </el-table-column>
  </el-table>

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="amount1" label="數(shù)值 1（元）"> </el-table-column>
    <el-table-column prop="amount2" label="數(shù)值 2（元）"> </el-table-column>
    <el-table-column prop="amount3" label="數(shù)值 3（元）"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10,
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12,
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9,
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17,
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15,
          },
        ],
      }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '總價(jià)'
            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
      },
    },
  }
</script>

合并行或列

多行或多列共用一個(gè)數(shù)據(jù)時(shí)，可以合并行或列。


通過給 table 傳入 span-method 方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象，里面包含當(dāng)前行 row、當(dāng)前列 column、當(dāng)前行號(hào) rowIndex、當(dāng)前列號(hào) columnIndex 四個(gè)屬性。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表 rowspan，第二個(gè)元素代表 colspan。 也可以返回一個(gè)鍵名為 rowspan 和 colspan 的對(duì)象。

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="數(shù)值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="數(shù)值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="數(shù)值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="數(shù)值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="數(shù)值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="數(shù)值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10,
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12,
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9,
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17,
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15,
          },
        ],
      }
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2]
          } else if (columnIndex === 1) {
            return [0, 0]
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
      },
    },
  }
</script>

自定義索引

自定義 type=index 列的行號(hào)。


通過給 type=index 的列傳入 index 屬性，可以自定義索引。該屬性傳入數(shù)字時(shí)，將作為索引的起始值。也可以傳入一個(gè)方法，它提供當(dāng)前行的行號(hào)（從 0 開始）作為參數(shù)，返回值將作為索引展示。 

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" :index="indexMethod"> </el-table-column>
    <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: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
            zip: 200333,
            tag: '家',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1517 弄',
            zip: 200333,
            tag: '公司',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1519 弄',
            zip: 200333,
            tag: '家',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀區(qū)',
            address: '上海市普陀區(qū)金沙江路 1516 弄',
            zip: 200333,
            tag: '公司',
          },
        ],
      }
    },
    methods: {
      indexMethod(index) {
        return index * 2
      },
    },
  }
</script>

Table Attributes

參數(shù) 說明 類型 可選值 默認(rèn)值
data 顯示的數(shù)據(jù) array — —
height Table 的高度，默認(rèn)為自動(dòng)高度。如果 height 為 number 類型，單位 px；如果 height 為 string 類型，則這個(gè)高度會(huì)設(shè)置為 Table 的 style.height 的值，Table 的高度會(huì)受控于外部樣式。 string / number — —
max-height Table 的最大高度。合法的值為數(shù)字或者單位為 px 的高度。 string / number — —
stripe 是否為斑馬紋 table boolean — false
border 是否帶有縱向邊框 boolean — false
size Table 的尺寸 string medium / small / mini —
fit 列的寬度是否自撐開 boolean — true
show-header 是否顯示表頭 boolean — true
highlight-current-row 是否要高亮當(dāng)前行 boolean — false
current-row-key 當(dāng)前行的 key，只寫屬性 string / number — —
row-class-name 行的 className 的回調(diào)方法，也可以使用字符串為所有行設(shè)置一個(gè)固定的 className。 function({ row, rowIndex }) / string — —
row-style 行的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有行設(shè)置一樣的 Style。 function({ row, rowIndex }) / object — —
cell-class-name 單元格的 className 的回調(diào)方法，也可以使用字符串為所有單元格設(shè)置一個(gè)固定的 className。 function({ row, column, rowIndex, columnIndex }) / string — —
cell-style 單元格的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有單元格設(shè)置一樣的 Style。 function({ row, column, rowIndex, columnIndex }) / object — —
header-row-class-name 表頭行的 className 的回調(diào)方法，也可以使用字符串為所有表頭行設(shè)置一個(gè)固定的 className。 function({ row, rowIndex }) / string — —
header-row-style 表頭行的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有表頭行設(shè)置一樣的 Style。 function({ row, rowIndex }) / object — —
header-cell-class-name 表頭單元格的 className 的回調(diào)方法，也可以使用字符串為所有表頭單元格設(shè)置一個(gè)固定的 className。 function({ row, column, rowIndex, columnIndex }) / string — —
header-cell-style 表頭單元格的 style 的回調(diào)方法，也可以使用一個(gè)固定的 Object 為所有表頭單元格設(shè)置一樣的 Style。 function({ row, column, rowIndex, columnIndex }) / object — —
row-key 行數(shù)據(jù)的 Key，用來優(yōu)化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數(shù)據(jù)時(shí)，該屬性是必填的。類型為 String 時(shí)，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請(qǐng)使用 Function。 function(row) / string — —
empty-text 空數(shù)據(jù)時(shí)顯示的文本內(nèi)容，也可以通過 #empty 設(shè)置 string — 暫無數(shù)據(jù)
default-expand-all 是否默認(rèn)展開所有行，當(dāng) Table 包含展開行存在或者為樹形表格時(shí)有效 boolean — false
expand-row-keys 可以通過該屬性設(shè)置 Table 目前的展開行，需要設(shè)置 row-key 屬性才能使用，該屬性為展開行的 keys 數(shù)組。 array — —
default-sort 默認(rèn)的排序列的 prop 和順序。它的 prop 屬性指定默認(rèn)的排序的列，order 指定默認(rèn)排序的順序 object order: ascending / descending 如果只指定了 prop, 沒有指定 order, 則默認(rèn)順序是 ascending
tooltip-effect tooltip effect 屬性 string dark / light dark
show-summary 是否在表尾顯示合計(jì)行 boolean — false
sum-text 合計(jì)行第一列的文本 string — 合計(jì)
summary-method 自定義的合計(jì)計(jì)算方法 function({ columns, data }) — —
span-method 合并行或列的計(jì)算方法 function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate 在多選表格中，當(dāng)僅有部分行被選中時(shí)，點(diǎn)擊表頭的多選框時(shí)的行為。若為 true，則選中所有行；若為 false，則取消選擇所有行 boolean — true
indent 展示樹形數(shù)據(jù)時(shí)，樹節(jié)點(diǎn)的縮進(jìn) number — 16
lazy 是否懶加載子節(jié)點(diǎn)數(shù)據(jù) boolean — —
load 加載子節(jié)點(diǎn)數(shù)據(jù)的函數(shù)，lazy 為 true 時(shí)生效，函數(shù)第二個(gè)參數(shù)包含了節(jié)點(diǎn)的層級(jí)信息 function(row, treeNode, resolve) — —
tree-props 渲染嵌套數(shù)據(jù)的配置選項(xiàng) object — { hasChildren: 'hasChildren', children: 'children' }

Table Events

事件名 說明 參數(shù)
select 當(dāng)用戶手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件 selection, row
select-all 當(dāng)用戶手動(dòng)勾選全選 Checkbox 時(shí)觸發(fā)的事件 selection
selection-change 當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該事件 selection
cell-mouse-enter 當(dāng)單元格 hover 進(jìn)入時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
cell-mouse-leave 當(dāng)單元格 hover 退出時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
cell-click 當(dāng)某個(gè)單元格被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
cell-dblclick 當(dāng)某個(gè)單元格被雙擊擊時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
cell-contextmenu 當(dāng)某個(gè)單元格被鼠標(biāo)右鍵點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 row, column, cell, event
row-click 當(dāng)某一行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 row, column, event
row-contextmenu 當(dāng)某一行被鼠標(biāo)右鍵點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 row, column, event
row-dblclick 當(dāng)某一行被雙擊時(shí)會(huì)觸發(fā)該事件 row, column, event
header-click 當(dāng)某一列的表頭被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 column, event
header-contextmenu 當(dāng)某一列的表頭被鼠標(biāo)右鍵點(diǎn)擊時(shí)觸發(fā)該事件 column, event
sort-change 當(dāng)表格的排序條件發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件 { column, prop, order }
filter-change 當(dāng)表格的篩選條件發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件，參數(shù)的值是一個(gè)對(duì)象，對(duì)象的 key 是 column 的 columnKey，對(duì)應(yīng)的 value 為用戶選擇的篩選條件的數(shù)組。 filters
current-change 當(dāng)表格的當(dāng)前行發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件，如果要高亮當(dāng)前行，請(qǐng)打開表格的 highlight-current-row 屬性 currentRow, oldCurrentRow
header-dragend 當(dāng)拖動(dòng)表頭改變了列的寬度的時(shí)候會(huì)觸發(fā)該事件 newWidth, oldWidth, column, event
expand-change 當(dāng)用戶對(duì)某一行展開或者關(guān)閉的時(shí)候會(huì)觸發(fā)該事件（展開行時(shí)，回調(diào)的第二個(gè)參數(shù)為 expandedRows；樹形表格時(shí)第二參數(shù)為 expanded） row, (expandedRows | expanded)

Table Methods

方法名 說明 參數(shù)
clearSelection 用于多選表格，清空用戶的選擇 —
toggleRowSelection 用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個(gè)參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中） row, selected
toggleAllSelection 用于多選表格，切換全選和全不選 —
toggleRowExpansion 用于可展開表格與樹形表格，切換某一行的展開狀態(tài)，如果使用了第二個(gè)參數(shù)，則是設(shè)置這一行展開與否（expanded 為 true 則展開） row, expanded
setCurrentRow 用于單選表格，設(shè)定某一行為選中行，如果調(diào)用時(shí)不加參數(shù)，則會(huì)取消目前高亮行的選中狀態(tài)。 row
clearSort 用于清空排序條件，數(shù)據(jù)會(huì)恢復(fù)成未排序的狀態(tài) —
clearFilter 不傳入?yún)?shù)時(shí)用于清空所有過濾條件，數(shù)據(jù)會(huì)恢復(fù)成未過濾的狀態(tài)，也可傳入由 columnKey 組成的數(shù)組以清除指定列的過濾條件 columnKey
doLayout 對(duì) Table 進(jìn)行重新布局。當(dāng) Table 或其祖先元素由隱藏切換為顯示時(shí)，可能需要調(diào)用此方法 —
sort 手動(dòng)對(duì) Table 進(jìn)行排序。參數(shù) prop 屬性指定排序列，order 指定排序順序。 prop: string, order: string

Table Slot

name 說明
append 插入至表格最后一行之后的內(nèi)容，如果需要對(duì)表格的內(nèi)容進(jìn)行無限滾動(dòng)操作，可能需要用到這個(gè) slot。若表格有合計(jì)行，該 slot 會(huì)位于合計(jì)行之上。

Table-column Attributes

參數(shù) 說明 類型 可選值 默認(rèn)值
type 對(duì)應(yīng)列的類型。如果設(shè)置了 selection 則顯示多選框；如果設(shè)置了 index 則顯示該行的索引（從 1 開始計(jì)算）；如果設(shè)置了 expand 則顯示為一個(gè)可展開的按鈕 string selection / index / expand —
index 如果設(shè)置了 type=index，可以通過傳遞 index 屬性來自定義索引 number / function(index) — —
column-key column 的 key，如果需要使用 filter-change 事件，則需要此屬性標(biāo)識(shí)是哪個(gè) column 的篩選條件 string — —
label 顯示的標(biāo)題 string — —
prop 對(duì)應(yīng)列內(nèi)容的字段名，也可以使用 property 屬性 string — —
width 對(duì)應(yīng)列的寬度 string / number — —
min-width 對(duì)應(yīng)列的最小寬度，與 width 的區(qū)別是 width 是固定的，min-width 會(huì)把剩余寬度按比例分配給設(shè)置了 min-width 的列 string / number — —
fixed 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) string, boolean true / 'left' / 'right' —
render-header 列標(biāo)題 Label 區(qū)域渲染使用的 Function function({ column, $index }) — —
sortable 對(duì)應(yīng)列是否可以排序，如果設(shè)置為 'custom'，則代表用戶希望遠(yuǎn)程排序，需要監(jiān)聽 Table 的 sort-change 事件 boolean / string true / false / 'custom' false
sort-method 對(duì)數(shù)據(jù)進(jìn)行排序的時(shí)候使用的方法，僅當(dāng) sortable 設(shè)置為 true 的時(shí)候有效，需返回一個(gè)數(shù)字，和 Array.sort 表現(xiàn)一致 function(a, b) — —
sort-by 指定數(shù)據(jù)按照哪個(gè)屬性進(jìn)行排序，僅當(dāng) sortable 設(shè)置為 true 且沒有設(shè)置 sort-method 的時(shí)候有效。如果 sort-by 為數(shù)組，則先按照第 1 個(gè)屬性排序，如果第 1 個(gè)相等，再按照第 2 個(gè)排序，以此類推 string / array / function(row, index) — —
sort-orders 數(shù)據(jù)在排序時(shí)所使用排序策略的輪轉(zhuǎn)順序，僅當(dāng) sortable 為 true 時(shí)有效。需傳入一個(gè)數(shù)組，隨著用戶點(diǎn)擊表頭，該列依次按照數(shù)組中元素的順序進(jìn)行排序 array 數(shù)組中的元素需為以下三者之一：ascending 表示升序，descending 表示降序，null 表示還原為原始順序 ['ascending', 'descending', null]
resizable 對(duì)應(yīng)列是否可以通過拖動(dòng)改變寬度（需要在 el-table 上設(shè)置 border 屬性為真） boolean — true
formatter 用來格式化內(nèi)容 function(row, column, cellValue, index) — —
show-overflow-tooltip 當(dāng)內(nèi)容過長被隱藏時(shí)顯示 tooltip boolean — false
align 對(duì)齊方式 string left / center / right left
header-align 表頭對(duì)齊方式，若不設(shè)置該項(xiàng)，則使用表格的對(duì)齊方式 string left / center / right —
class-name 列的 className string — —
label-class-name 當(dāng)前列標(biāo)題的自定義類名 string — —
selectable 僅對(duì) type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選 function(row, index) — —
reserve-selection 僅對(duì) type=selection 的列有效，類型為 Boolean，為 true 則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key） boolean — false
filters 數(shù)據(jù)過濾的選項(xiàng)，數(shù)組格式，數(shù)組中的元素需要有 text 和 value 屬性。 array[{ text, value }] — —
filter-placement 過濾彈出框的定位 string 與 Tooltip 的 placement 屬性相同 —
filter-multiple 數(shù)據(jù)過濾的選項(xiàng)是否多選 boolean — true
filter-method 數(shù)據(jù)過濾使用的方法，如果是多選的篩選項(xiàng)，對(duì)每一條數(shù)據(jù)會(huì)執(zhí)行多次，任意一次返回 true 就會(huì)顯示。 function(value, row, column) — —
filtered-value 選中的數(shù)據(jù)過濾項(xiàng)，如果需要自定義表頭過濾的渲染方式，可能會(huì)需要此屬性。 array — —

Table-column Slot

name 說明
— 自定義列的內(nèi)容，參數(shù)為 { row, column, $index }
header 自定義表頭的內(nèi)容. 參數(shù)為 { column, $index }


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)