1. Table表格例子

1.1. Table表格用于展示多條結構類似的數據, 可對數據進行排序、篩選、對比或其他自定義操作。

1.2. Table Attributes

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

1.3. Table Events

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

1.4. Table Methods

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

1.5. Table Slot

name	說明
append	插入至表格最后一行之后的內容, 如果需要對表格的內容進行無限滾動操作, 可能需要用到這個slot。若表格有合計行, 該slot會位于合計行之上。

1.6. Table-column Attributes

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

1.7. Table-column Scoped Slot

name	說明
—	自定義列的內容, 參數為{ row, column, $index }
header	自定義表頭的內容.參數為{ column, $index }

2. Table表格例子

2.1. 使用腳手架新建一個名為element-ui-table的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import BaseTable from '../components/BaseTable.vue' import StripeTable from '../components/StripeTable.vue' import HighlightTable from '../components/HighlightTable.vue' import BorderTable from '../components/BorderTable.vue' import FixHeadTable from '../components/FixHeadTable.vue' import FixColTable from '../components/FixColTable.vue' import FixHeadColTable from '../components/FixHeadColTable.vue' import MaxHeightTable from '../components/MaxHeightTable.vue' import MultiHeadTable from '../components/MultiHeadTable.vue' import RadioTable from '../components/RadioTable.vue' import CheckboxTable from '../components/CheckboxTable.vue' import SortTable from '../components/SortTable.vue' import FiltersTable from '../components/FiltersTable.vue' import ScopedTable from '../components/ScopedTable.vue' import ExpandTable from '../components/ExpandTable.vue' import ShowSummaryTable from '../components/ShowSummaryTable.vue' import SpanMethodTable from '../components/SpanMethodTable.vue' import IndexTable from '../components/IndexTable.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/BaseTable' },{ path: '/BaseTable', component: BaseTable },{ path: '/StripeTable', component: StripeTable },{ path: '/HighlightTable', component: HighlightTable },{ path: '/BorderTable', component: BorderTable },{ path: '/FixHeadTable', component: FixHeadTable },{ path: '/FixColTable', component: FixColTable },{ path: '/FixHeadColTable', component: FixHeadColTable },{ path: '/MaxHeightTable', component: MaxHeightTable },{ path: '/MultiHeadTable', component: MultiHeadTable },{ path: '/RadioTable', component: RadioTable },{ path: '/CheckboxTable', component: CheckboxTable },{ path: '/SortTable', component: SortTable },{ path: '/FiltersTable', component: FiltersTable },{ path: '/ScopedTable', component: ScopedTable },{ path: '/ExpandTable', component: ExpandTable },{ path: '/ShowSummaryTable', component: ShowSummaryTable },{ path: '/SpanMethodTable', component: SpanMethodTable },{ path: '/IndexTable', component: IndexTable } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建BaseTable.vue

<template><div><h1>基礎表格-基礎的表格展示用法</h1><h4>當el-table元素中注入data對象數組后, 在el-table-column中用prop屬性來對應對象中的鍵名即可填入數據, 用label屬性來定義表格的列名。可以使用width屬性來定義列寬。</h4><el-table :data="tableData" style="width: 50%"><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: [{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>

2.4. 在components下創建StripeTable.vue

<template><div><h1>帶斑馬紋表格-使用帶斑馬紋的表格, 可以更容易區分出不同行的數據</h1><h4>stripe屬性可以創建帶斑馬紋的表格。它接受一個Boolean, 默認為false, 設置為true即為啟用。</h4><el-table :data="tableData" stripe style="width: 40%"><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: [{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>

2.5. 在components下創建HighlightTable.vue

<template><div><h1>帶狀態表格-可將表格內容highlight顯示, 方便區分[成功、信息、警告、危險]等內容</h1><h4>可以通過指定Table組件的row-class-name屬性來為Table中的某一行添加class, 表明該行處于某種狀態。</h4><el-table :data="tableData" style="width: 50%" :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></div> </template><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;} </style><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: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]}} } </script>

2.6. 在components下創建BorderTable.vue

<template><div><h1>帶邊框表格</h1><h4>默認情況下, Table組件是不具有豎直方向的邊框的, 如果需要, 可以使用border屬性, 它接受一個Boolean, 設置為true即可啟用。</h4><el-table :data="tableData" border style="width: 50%"><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: [{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>

2.7. 在components下創建FixHeadTable.vue

<template><div><h1>固定表頭-縱向內容過多時, 可選擇固定表頭</h1><h4>只要在el-table元素中定義了height屬性, 即可實現固定表頭的表格, 而不需要額外的代碼。</h4><el-table :data="tableData" height="250" border style="width: 40%"><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: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]}} } </script>

2.8. 在components下創建FixColTable.vue

<template><div><h1>固定列-橫向內容過多時, 可選擇固定列</h1><h4>固定列需要使用fixed屬性, 它接受Boolean值或者left/right, 表示左邊固定還是右邊固定。</h4><el-table :data="tableData" border style="width: 30%"><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="市區" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="郵編" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="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></div> </template><script> export default {methods: {handleClick (row) {console.log(row)}},data () {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1516 弄',zip: 200333}]}} } </script>

2.9. 在components下創建FixHeadColTable.vue

<template><div><h1>固定列和表頭-橫縱內容過多時, 可選擇固定列和表頭</h1><h4>固定列和表頭可以同時使用, 只需要將上述兩個屬性分別設置好即可。</h4><el-table :data="tableData" style="width: 40%" 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="市區" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="郵編" width="120"></el-table-column></el-table></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}]}} } </script>

2.10. 在components下創建MaxHeightTable.vue

<template><div><h1>流體高度-當數據量動態變化時, 可以為Table設置一個最大高度</h1><h4>通過設置max-height屬性為Table指定最大高度。此時若表格所需的高度大于最大高度, 則會顯示一個滾動條。</h4><el-table :data="tableData" style="width: 50%" 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="市區" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="郵編" width="120"></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> </template><script> export default {methods: {deleteRow (index, rows) {rows.splice(index, 1)}},data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}]}} } </script>

2.11. 在components下創建MultiHeadTable.vue

<template><div><h1>多級表頭-數據結構比較復雜的時候, 可使用多級表頭來展現數據的層次關系</h1><h4>只需要在el-table-column里面嵌套el-table-column, 就可以實現多級表頭。</h4><el-table :data="tableData" style="width: 50%"><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="市區" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="郵編"></el-table-column></el-table-column></el-table-column></el-table></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333}]}} } </script>

2.12. 在components下創建RadioTable.vue

<template><div><h1>單選-選擇單行數據時使用色塊表示</h1><h4>Table組件提供了單選的支持, 只需要配置highlight-current-row屬性即可實現單選。之后由current-change事件來管理選中時觸發的事件, 它會傳入currentRow, oldCurrentRow。如果需要顯示索引, 可以增加一列el-table-column, 設置type屬性為index即可顯示從1開始的索引號。</h4><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></div> </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 弄'}],currentRow: null}},methods: {setCurrent (row) {this.$refs.singleTable.setCurrentRow(row)},handleCurrentChange (val) {this.currentRow = val}} } </script>

2.13. 在components下創建CheckboxTable.vue

<template><div><h1>多選-選擇多行數據時使用Checkbox</h1><h4>實現多選非常簡單: 手動添加一個el-table-column, 設type屬性為selection即可; 默認情況下若內容過多會折行顯示, 若需要單行顯示可以使用show-overflow-tooltip屬性, 它接受一個Boolean, 為true時多余的內容會在hover時以tooltip的形式顯示出來。</h4><el-table ref="multipleTable" :data="tableData" style="width: 20%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="120"><template slot-scope="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]])">切換第二、第三行的選中狀態</el-button><el-button @click="toggleSelection()">取消選擇</el-button></div></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀區金沙江路 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>

2.14. 在components下創建SortTable.vue

<template><div><h1>排序-對表格進行排序, 可快速查找或對比數據</h1><h4>在列中設置sortable屬性即可實現以該列為基準的排序, 接受一個Boolean, 默認為false。可以通過Table的default-sort屬性設置默認的排序列和排序順序。可以使用sort-method或者sort-by使用自定義的排序規則。如果需要后端排序, 需將sortable設置為custom, 同時在Table上監聽sort-change事件, 在事件回調中可以獲取當前排序的字段名和排序順序, 從而向接口請求排序后的表格數據。在本例中, 我們還使用了formatter屬性, 它用于格式化指定列的值, 接受一個Function, 會傳入四個參數: row, column, cellValue和index, 可以根據自己的需求進行處理。</h4><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></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-02',name: 'd王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: 'b王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: 'a王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: 'c王小虎',address: '上海市普陀區金沙江路 1516 弄'}]}},methods: {formatter (row, column, cellValue, index) {return index + row.address}} } </script>

2.15. 在components下創建FiltersTable.vue

<template><div><h1>篩選-對表格進行篩選, 可快速查找到自己想看的數據</h1><h4>在列中設置filtersfilter-method屬性即可開啟該列的篩選, filters是一個數組, filter-method是一個方法, 它用于決定某些數據是否顯示, 會傳入三個參數: value, row和column。</h4><el-table ref="filterTable" :data="tableData" style="width: 40%"><el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="dateFilter" :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="標簽" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="right-start"><template slot-scope="scope"><el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column></el-table><el-button @click="resetDateFilter">清除日期過濾器</el-button><el-button @click="clearFilter">清除所有過濾器</el-button></div> </template><script> export default {data () {return {dateFilter: [{ 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' }],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄',tag: '家'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄',tag: '公司'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄',tag: '家'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 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.propertyreturn row[property] === value}} } </script>

2.16. 在components下創建ScopedTable.vue

<template><div><h1>自定義列模板-自定義列的顯示內容，可組合其他組件使用</h1><h4>通過Scoped slot可以獲取到row, column, $index和store(table內部的狀態管理)的數據。</h4><el-table :data="tableData" style="width: 30%"><el-table-column label="日期" width="180"><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 label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="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></div> </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 弄'}]}},methods: {handleEdit (index, row) {console.log(index, row)},handleDelete (index, row) {console.log(index, row)}} } </script>

2.17. 在components下創建ExpandTable.vue

<template><div><h1>展開行-當行內容過多并且不想顯示橫向滾動條時, 可以使用Table展開行功能</h1><h4>通過設置type="expand"和Scoped slot可以開啟展開行功能, el-table-column的模板會被渲染成為展開行的內容, 展開行可訪問的屬性與使用自定義列模板時的Scoped slot相同。</h4><el-table :data="tableData" style="width: 60%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline><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></div> </template><script> export default {data () {return {tableData: [{id: '12987122',name: '好滋好味雞蛋仔',category: '江浙小吃、小吃零食',desc: '荷蘭優質淡奶，奶香濃而不膩',address: '上海市普陀區真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987123',name: '好滋好味雞蛋仔',category: '江浙小吃、小吃零食',desc: '荷蘭優質淡奶，奶香濃而不膩',address: '上海市普陀區真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987125',name: '好滋好味雞蛋仔',category: '江浙小吃、小吃零食',desc: '荷蘭優質淡奶，奶香濃而不膩',address: '上海市普陀區真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987126',name: '好滋好味雞蛋仔',category: '江浙小吃、小吃零食',desc: '荷蘭優質淡奶，奶香濃而不膩',address: '上海市普陀區真北路',shop: '王小虎夫妻店',shopId: '10333'}]}} } </script>

2.18. 在components下創建ShowSummaryTable.vue

<template><div><h1>表尾合計行-若表格展示的是各類數字, 可以在表尾顯示各列的合計</h1><h4>將show-summary設置為true就會在表格尾部展示合計行。默認情況下, 對于合計行, 第一列不進行數據求合操作, 而是顯示「合計」二字(可通過sum-text配置), 其余列會將本列所有數值進行求合操作, 并顯示出來。當然, 你也可以定義自己的合計邏輯。使用summary-method并傳入一個方法, 返回一個數組, 這個數組中的各項就會顯示在合計行的各列中, 具體可以參考本例中的第二個表格。</h4><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="數值 1"></el-table-column><el-table-column prop="amount2" sortable label="數值 2"></el-table-column><el-table-column prop="amount3" sortable label="數值 3"></el-table-column></el-table><el-table :data="tableData" border :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="數值 1(元)"></el-table-column><el-table-column prop="amount2" label="數值 2(元)"></el-table-column><el-table-column prop="amount3" label="數值 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: {getSummaries (param) {const { columns, data } = paramconst 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}} } </script>

2.19. 在components下創建SpanMethodTable.vue

<template><div><h1>合并行或列-多行或多列共用一個數據時, 可以合并行或列</h1><h4>通過給table傳入span-method方法可以實現合并行或列, 方法的參數是一個對象, 里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組, 第一個元素代表rowspan, 第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。</h4><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="數值 1"></el-table-column><el-table-column prop="amount2" sortable label="數值 2"></el-table-column><el-table-column prop="amount3" sortable label="數值 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="數值 1(元)"></el-table-column><el-table-column prop="amount2" label="數值 2(元)"></el-table-column><el-table-column prop="amount3" label="數值 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>

2.20. 在components下創建IndexTable.vue

<template><div><h1>自定義索引-自定義type=index列的行號</h1><h4>通過給type=index的列傳入index屬性, 可以自定義索引。該屬性傳入數字時, 將作為索引的起始值。也可以傳入一個方法, 它提供當前行的行號(從0開始)作為參數, 返回值將作為索引展示。</h4><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></div> </template><script> export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1518 弄',zip: 200333,tag: '家'}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1517 弄',zip: 200333,tag: '公司'}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1519 弄',zip: 200333,tag: '家'}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀區',address: '上海市普陀區金沙江路 1516 弄',zip: 200333,tag: '公司'}]}},methods: {indexMethod (index) {return index * 2}} } </script>

2.21. 運行項目, 訪問http://localhost:8080/#/BaseTable

2.22. 運行項目, 訪問http://localhost:8080/#/StripeTable?

2.23. 運行項目, 訪問http://localhost:8080/#/HighlightTable

2.24. 運行項目, 訪問http://localhost:8080/#/BorderTable?

2.25. 運行項目, 訪問http://localhost:8080/#/FixHeadTable?

2.26. 運行項目, 訪問http://localhost:8080/#/FixColTable?

2.27. 運行項目, 訪問http://localhost:8080/#/FixHeadColTable?

2.28. 運行項目, 訪問http://localhost:8080/#/MaxHeightTable?

2.29. 運行項目, 訪問http://localhost:8080/#/MultiHeadTable?

2.30. 運行項目, 訪問http://localhost:8080/#/RadioTable?

2.31. 運行項目, 訪問http://localhost:8080/#/CheckboxTable?

2.32. 運行項目, 訪問http://localhost:8080/#/SortTable?

2.33. 運行項目, 訪問http://localhost:8080/#/FiltersTable?

2.34. 運行項目, 訪問http://localhost:8080/#/ScopedTable

2.35. 運行項目, 訪問http://localhost:8080/#/ExpandTable?

2.36. 運行項目, 訪問http://localhost:8080/#/ShowSummaryTable?

2.37. 運行項目, 訪問http://localhost:8080/#/SpanMethodTable?

2.38. 運行項目, 訪問http://localhost:8080/#/IndexTable?

總結

以上是生活随笔為你收集整理的022_Table表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。