Vue Element UI 是一款基于 Vue.js 的組件庫，它由餓了么前端團隊開發(fā)和維護。其中，Table 組件是常用的業(yè)務(wù)組件，它提供分頁、排序、篩選等功能，可以快捷地展示數(shù)據(jù)。

Table 組件中常用的 props:

data: Array // 表格數(shù)據(jù)
columns: Array // 表頭數(shù)據(jù)

使用示例：

<el-table :data="tableData" :columns="tableColumns"></el-table>

其中，data 數(shù)據(jù)需要以對象數(shù)組的形式提供，每個對象的 key 對應(yīng) columns 中某個對象的 prop，如：

tableData: [
{
name: 'John',
age: 18,
address: 'New York'
},
{
name: 'Jane',
age: 22,
address: 'Chicago'
}
]

而 columns 中每個對象的 key 包括：

prop: String // 對應(yīng) data 中某個對象的 key
label: String // 表頭文本
sortable: Boolean // 是否可排序，默認(rèn) false
ellipsis: Boolean // 是否顯示省略號，默認(rèn) false

如果需要對表格數(shù)據(jù)進行復(fù)雜處理，可以使用 scoped slot。例如，我們需要對表格中年齡大于 20 的數(shù)據(jù)進行特殊處理：

<el-table-column label="Age">
<template slot-scope="scope">
<span v-if="scope.row.age > 20" style="color: red">{{ scope.row.age }}</span>
<span v-else>{{ scope.row.age }}</span>
</template>
</el-table-column>

除此之外，Table 組件還提供了分頁、排序、篩選等功能，可以通過配置相應(yīng)的 props 來開啟相應(yīng)功能。例如，開啟分頁功能：

<el-table :data="tableData" :columns="tableColumns" :pager="true"></el-table>

對于較復(fù)雜的業(yè)務(wù)場景，Table 組件還提供了自定義表格的方法。例如，我們需要在表格中添加一個新的操作列：

<el-table-column label="Action">
<template slot-scope="scope">
<a href="#" @click="handleEdit(scope.$index)">Edit</a>
</template>
</el-table-column>

Table 組件可以說是業(yè)務(wù)場景中最常用的組件之一，它可以快捷地進行數(shù)據(jù)展示和處理，提高開發(fā)效率。