022_Table表格
1. Table表格例子
1.1. Table表格用于展示多條結(jié)構(gòu)類(lèi)似的數(shù)據(jù), 可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。
1.2. Table Attributes
| 參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
| data | 顯示的數(shù)據(jù) | array | 無(wú) | 無(wú) |
| height | Table的高度, 默認(rèn)為自動(dòng)高度。如果height為number類(lèi)型, 單位px; 如果height為string類(lèi)型, 則這個(gè)高度會(huì)設(shè)置為T(mén)able的style.height的值, Table的高度會(huì)受控于外部樣式。 | string/number | 無(wú) | 無(wú) |
| max-height | Table的最大高度。合法的值為數(shù)字或者單位為px的高度。 | string/number | 無(wú) | 無(wú) |
| stripe | 是否為斑馬紋table | boolean | 無(wú) | false |
| border | 是否帶有縱向邊框 | boolean | 無(wú) | false |
| size | Table的尺寸 | string | medium / small / mini | 無(wú) |
| fit | 列的寬度是否自撐開(kāi) | boolean | 無(wú) | true |
| show-header | 是否顯示表頭 | boolean | 無(wú) | false |
| highlight-current-row | 是否要高亮當(dāng)前行 | boolean | 無(wú) | false |
| current-row-key | 當(dāng)前行的key, 只寫(xiě)屬性 | String,Number | 無(wú) | 無(wú) |
| row-class-name | 行的className的回調(diào)方法, 也可以使用字符串為所有行設(shè)置一個(gè)固定的className。 | Function({row, rowIndex})/String | 無(wú) | 無(wú) |
| row-style | 行的style的回調(diào)方法, 也可以使用一個(gè)固定的Object為所有行設(shè)置一樣的Style。 | Function({row, rowIndex})/Object | 無(wú) | 無(wú) |
| cell-class-name | 單元格的className的回調(diào)方法, 也可以使用字符串為所有單元格設(shè)置一個(gè)固定的className。 | Function({row, column, rowIndex, columnIndex})/String | 無(wú) | 無(wú) |
| cell-style | 單元格的style的回調(diào)方法, 也可以使用一個(gè)固定的Object為所有單元格設(shè)置一樣的Style。 | Function({row, column, rowIndex, columnIndex})/Object | 無(wú) | 無(wú) |
| header-row-class-name | 表頭行的className的回調(diào)方法, 也可以使用字符串為所有表頭行設(shè)置一個(gè)固定的className。 | Function({row, rowIndex})/String | 無(wú) | 無(wú) |
| header-row-style | 表頭行的style的回調(diào)方法, 也可以使用一個(gè)固定的Object為所有表頭行設(shè)置一樣的Style。 | Function({row, rowIndex})/Object | 無(wú) | 無(wú) |
| header-cell-class-name | 表頭單元格的className的回調(diào)方法, 也可以使用字符串為所有表頭單元格設(shè)置一個(gè)固定的className。 | Function({row, column, rowIndex, columnIndex})/String | 無(wú) | 無(wú) |
| header-cell-style | 表頭單元格的style的回調(diào)方法, 也可以使用一個(gè)固定的Object為所有表頭單元格設(shè)置一樣的Style。 | Function({row, column, rowIndex, columnIndex})/Object | 無(wú) | 無(wú) |
| row-key | 行數(shù)據(jù)的Key, 用來(lái)優(yōu)化Table的渲染; 在使用reserve-selection功能與顯示樹(shù)形數(shù)據(jù)時(shí), 該屬性是必填的。類(lèi)型為String時(shí), 支持多層訪(fǎng)問(wèn): user.info.id, 但不支持user.info[0].id, 此種情況請(qǐng)使用Function。 | Function(row)/String | 無(wú) | 無(wú) |
| empty-text | 空數(shù)據(jù)時(shí)顯示的文本內(nèi)容, 也可以通過(guò)slot="empty"設(shè)置 | String | 無(wú) | 暫無(wú)數(shù)據(jù) |
| default-expand-all | 是否默認(rèn)展開(kāi)所有行, 當(dāng)Table包含展開(kāi)行存在或者為樹(shù)形表格時(shí)有效 | Boolean | 無(wú) | false |
| expand-row-keys | 可以通過(guò)該屬性設(shè)置Table目前的展開(kāi)行, 需要設(shè)置row-key屬性才能使用, 該屬性為展開(kāi)行的keys數(shù)組。 | Array | 無(wú) | 無(wú) |
| default-sort | 默認(rèn)的排序列的prop和順序。它的prop屬性指定默認(rèn)的排序的列, order指定默認(rèn)排序的順序 | Object | order: ascending, descending | 如果只指定了prop, 沒(méi)有指定order, 則默認(rèn)順序是ascending |
| tooltip-effect | tooltipeffect屬性 | String | dark/light | 無(wú) |
| show-summary | 是否在表尾顯示合計(jì)行 | Boolean | 無(wú) | false |
| sum-text | 合計(jì)行第一列的文本 | String | 無(wú) | 合計(jì) |
| summary-method | 自定義的合計(jì)計(jì)算方法 | Function({ columns, data }) | 無(wú) | 無(wú) |
| span-method | 合并行或列的計(jì)算方法 | Function({ row, column, rowIndex, columnIndex }) | 無(wú) | 無(wú) |
| select-on-indeterminate | 在多選表格中, 當(dāng)僅有部分行被選中時(shí), 點(diǎn)擊表頭的多選框時(shí)的行為。若為true, 則選中所有行; 若為false, 則取消選擇所有行 | Boolean | 無(wú) | true |
| indent | 展示樹(shù)形數(shù)據(jù)時(shí), 樹(shù)節(jié)點(diǎn)的縮進(jìn) | Number | 無(wú) | 16 |
| lazy | 是否懶加載子節(jié)點(diǎn)數(shù)據(jù) | Boolean | 無(wú) | 無(wú) |
| load | 加載子節(jié)點(diǎn)數(shù)據(jù)的函數(shù), lazy為true時(shí)生效, 函數(shù)第二個(gè)參數(shù)包含了節(jié)點(diǎn)的層級(jí)信息 | Function(row, treeNode, resolve) | 無(wú) | 無(wú) |
| tree-props | 渲染嵌套數(shù)據(jù)的配置選項(xiàng) | Object | 無(wú) | { hasChildren: 'hasChildren', children: 'children' } |
1.3. Table Events
| 事件名 | 說(shuō)明 | 參數(shù) |
| select | 當(dāng)用戶(hù)手動(dòng)勾選數(shù)據(jù)行的Checkbox時(shí)觸發(fā)的事件 | selection, row |
| select-all | 當(dāng)用戶(hù)手動(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 |
| 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為用戶(hù)選擇的篩選條件的數(shù)組。 | filters |
| current-change | 當(dāng)表格的當(dāng)前行發(fā)生變化的時(shí)候會(huì)觸發(fā)該事件, 如果要高亮當(dāng)前行, 請(qǐng)打開(kāi)表格的highlight-current-row屬性 | currentRow, oldCurrentRow |
| header-dragend | 當(dāng)拖動(dòng)表頭改變了列的寬度的時(shí)候會(huì)觸發(fā)該事件 | newWidth, oldWidth, column, event |
| expand-change | 當(dāng)用戶(hù)對(duì)某一行展開(kāi)或者關(guān)閉的時(shí)候會(huì)觸發(fā)該事件(展開(kāi)行時(shí), 回調(diào)的第二個(gè)參數(shù)為expandedRows; 樹(shù)形表格時(shí)第二參數(shù)為expanded) | row, (expandedRows | expanded) |
1.4. Table Methods
| 方法名 | 說(shuō)明 | 參數(shù) |
| clearSelection | 用于多選表格, 清空用戶(hù)的選擇 | 無(wú) |
| toggleRowSelection | 用于多選表格, 切換某一行的選中狀態(tài), 如果使用了第二個(gè)參數(shù), 則是設(shè)置這一行選中與否(selected為true則選中) | row, selected |
| toggleAllSelection | 用于多選表格, 切換所有行的選中狀態(tài) | 無(wú) |
| toggleRowExpansion | 用于可展開(kāi)表格與樹(shù)形表格, 切換某一行的展開(kāi)狀態(tài), 如果使用了第二個(gè)參數(shù), 則是設(shè)置這一行展開(kāi)與否(expanded為true則展開(kāi)) | row, expanded |
| setCurrentRow | 用于單選表格, 設(shè)定某一行為選中行, 如果調(diào)用時(shí)不加參數(shù), 則會(huì)取消目前高亮行的選中狀態(tài)。 | row |
| clearSort | 用于清空排序條件, 數(shù)據(jù)會(huì)恢復(fù)成未排序的狀態(tài) | 無(wú) |
| clearFilter | 不傳入?yún)?shù)時(shí)用于清空所有過(guò)濾條件, 數(shù)據(jù)會(huì)恢復(fù)成未過(guò)濾的狀態(tài), 也可傳入由columnKey組成的數(shù)組以清除指定列的過(guò)濾條件 | columnKey |
| doLayout | 對(duì)Table進(jìn)行重新布局。當(dāng)Table或其祖先元素由隱藏切換為顯示時(shí), 可能需要調(diào)用此方法 | 無(wú) |
| sort | 手動(dòng)對(duì)Table進(jìn)行排序。參數(shù)prop屬性指定排序列, order指定排序順序。 | prop: string, order: string |
1.5. Table Slot
| name | 說(shuō)明 |
| append | 插入至表格最后一行之后的內(nèi)容, 如果需要對(duì)表格的內(nèi)容進(jìn)行無(wú)限滾動(dòng)操作, 可能需要用到這個(gè)slot。若表格有合計(jì)行, 該slot會(huì)位于合計(jì)行之上。 |
1.6. Table-column Attributes
| 參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
| type | 對(duì)應(yīng)列的類(lèi)型。如果設(shè)置了selection則顯示多選框; 如果設(shè)置了index則顯示該行的索引(從1開(kāi)始計(jì)算); 如果設(shè)置了expand則顯示為一個(gè)可展開(kāi)的按鈕 | string | selection/index/expand | 無(wú) |
| index | 如果設(shè)置了type=index, 可以通過(guò)傳遞index屬性來(lái)自定義索引 | number, Function(index) | 無(wú) | 無(wú) |
| column-key | column的key, 如果需要使用filter-change事件, 則需要此屬性標(biāo)識(shí)是哪個(gè)column的篩選條件 | string | 無(wú) | 無(wú) |
| label | 顯示的標(biāo)題 | string | 無(wú) | 無(wú) |
| prop | 對(duì)應(yīng)列內(nèi)容的字段名, 也可以使用property屬性 | string | 無(wú) | 無(wú) |
| width | 對(duì)應(yīng)列的寬度 | string | 無(wú) | 無(wú) |
| min-width | 對(duì)應(yīng)列的最小寬度, 與width的區(qū)別是width是固定的, min-width會(huì)把剩余寬度按比例分配給設(shè)置了min-width的列 | string | 無(wú) | 無(wú) |
| fixed | 列是否固定在左側(cè)或者右側(cè), true表示固定在左側(cè) | string, boolean | true, left, right | 無(wú) |
| render-header | 列標(biāo)題Label區(qū)域渲染使用的Function | Function(h, { column, $index }) | 無(wú) | 無(wú) |
| sortable | 對(duì)應(yīng)列是否可以排序, 如果設(shè)置為'custom', 則代表用戶(hù)希望遠(yuǎn)程排序, 需要監(jiān)聽(tīng)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) | 無(wú) | 無(wú) |
| sort-by | 指定數(shù)據(jù)按照哪個(gè)屬性進(jìn)行排序, 僅當(dāng)sortable設(shè)置為true且沒(méi)有設(shè)置sort-method的時(shí)候有效。如果sort-by為數(shù)組, 則先按照第1個(gè)屬性排序, 如果第1個(gè)相等, 再按照第2個(gè)排序, 以此類(lèi)推 | String/Array/Function(row, index) | 無(wú) | 無(wú) |
| sort-orders | 數(shù)據(jù)在排序時(shí)所使用排序策略的輪轉(zhuǎn)順序, 僅當(dāng)sortable為true時(shí)有效。需傳入一個(gè)數(shù)組, 隨著用戶(hù)點(diǎn)擊表頭, 該列依次按照數(shù)組中元素的順序進(jìn)行排序 | array | 數(shù)組中的元素需為以下三者之一: ascending表示升序, descending表示降序, null表示還原為原始順序 | ['ascending', 'descending', null] |
| resizable | 對(duì)應(yīng)列是否可以通過(guò)拖動(dòng)改變寬度(需要在el-table上設(shè)置border屬性為真) | boolean | 無(wú) | true |
| formatter | 用來(lái)格式化內(nèi)容 | Function(row, column, cellValue, index) | 無(wú) | 無(wú) |
| show-overflow-tooltip | 當(dāng)內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示tooltip | Boolean | 無(wú) | false |
| align | 對(duì)齊方式 | String | left/center/right | left |
| header-align | 表頭對(duì)齊方式, 若不設(shè)置該項(xiàng), 則使用表格的對(duì)齊方式 | String | left/center/right | 無(wú) |
| class-name | 列的className | string | 無(wú) | 無(wú) |
| label-class-name | 當(dāng)前列標(biāo)題的自定義類(lèi)名 | string | 無(wú) | 無(wú) |
| selectable | 僅對(duì)type=selection的列有效, 類(lèi)型為Function, Function的返回值用來(lái)決定這一行的CheckBox是否可以勾選 | Function(row, index) | 無(wú) | 無(wú) |
| reserve-selection | 僅對(duì)type=selection的列有效, 類(lèi)型為Boolean, 為true則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)(需指定row-key) | Boolean | 無(wú) | false |
| filters | 數(shù)據(jù)過(guò)濾的選項(xiàng), 數(shù)組格式, 數(shù)組中的元素需要有text和value屬性。 | Array[{ text, value }] | 無(wú) | 無(wú) |
| filter-placement | 過(guò)濾彈出框的定位 | String | 與Tooltip的placement屬性相同 | 無(wú) |
| filter-multiple | 數(shù)據(jù)過(guò)濾的選項(xiàng)是否多選 | Boolean | 無(wú) | true |
| filter-method | 數(shù)據(jù)過(guò)濾使用的方法, 如果是多選的篩選項(xiàng), 對(duì)每一條數(shù)據(jù)會(huì)執(zhí)行多次, 任意一次返回true就會(huì)顯示。 | Function(value, row, column) | 無(wú) | 無(wú) |
| filtered-value | 選中的數(shù)據(jù)過(guò)濾項(xiàng), 如果需要自定義表頭過(guò)濾的渲染方式, 可能會(huì)需要此屬性。 | Array | 無(wú) | 無(wú) |
1.7. Table-column Scoped Slot
| name | 說(shuō)明 |
| — | 自定義列的內(nèi)容, 參數(shù)為{ row, column, $index } |
| header | 自定義表頭的內(nèi)容.參數(shù)為{ column, $index } |
2. Table表格例子
2.1. 使用腳手架新建一個(gè)名為element-ui-table的前端項(xiàng)目, 同時(shí)安裝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 router2.3. 在components下創(chuàng)建BaseTable.vue
<template><div><h1>基礎(chǔ)表格-基礎(chǔ)的表格展示用法</h1><h4>當(dāng)el-table元素中注入data對(duì)象數(shù)組后, 在el-table-column中用prop屬性來(lái)對(duì)應(yīng)對(duì)象中的鍵名即可填入數(shù)據(jù), 用label屬性來(lái)定義表格的列名。可以使用width屬性來(lái)定義列寬。</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: '上海市普陀區(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>2.4. 在components下創(chuàng)建StripeTable.vue
<template><div><h1>帶斑馬紋表格-使用帶斑馬紋的表格, 可以更容易區(qū)分出不同行的數(shù)據(jù)</h1><h4>stripe屬性可以創(chuàng)建帶斑馬紋的表格。它接受一個(gè)Boolean, 默認(rèn)為false, 設(shè)置為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: '上海市普陀區(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>2.5. 在components下創(chuàng)建HighlightTable.vue
<template><div><h1>帶狀態(tài)表格-可將表格內(nèi)容highlight顯示, 方便區(qū)分[成功、信息、警告、危險(xiǎn)]等內(nèi)容</h1><h4>可以通過(guò)指定Table組件的row-class-name屬性來(lái)為T(mén)able中的某一行添加class, 表明該行處于某種狀態(tài)。</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: '上海市普陀區(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>2.6. 在components下創(chuàng)建BorderTable.vue
<template><div><h1>帶邊框表格</h1><h4>默認(rèn)情況下, Table組件是不具有豎直方向的邊框的, 如果需要, 可以使用border屬性, 它接受一個(gè)Boolean, 設(shè)置為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: '上海市普陀區(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>2.7. 在components下創(chuàng)建FixHeadTable.vue
<template><div><h1>固定表頭-縱向內(nèi)容過(guò)多時(shí), 可選擇固定表頭</h1><h4>只要在el-table元素中定義了height屬性, 即可實(shí)現(xiàn)固定表頭的表格, 而不需要額外的代碼。</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: '上海市普陀區(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>2.8. 在components下創(chuàng)建FixColTable.vue
<template><div><h1>固定列-橫向內(nèi)容過(guò)多時(shí), 可選擇固定列</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="市區(qū)" 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: '普陀區(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>2.9. 在components下創(chuàng)建FixHeadColTable.vue
<template><div><h1>固定列和表頭-橫縱內(nèi)容過(guò)多時(shí), 可選擇固定列和表頭</h1><h4>固定列和表頭可以同時(shí)使用, 只需要將上述兩個(gè)屬性分別設(shè)置好即可。</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="市區(qū)" 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: '普陀區(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>2.10. 在components下創(chuàng)建MaxHeightTable.vue
<template><div><h1>流體高度-當(dāng)數(shù)據(jù)量動(dòng)態(tài)變化時(shí), 可以為T(mén)able設(shè)置一個(gè)最大高度</h1><h4>通過(guò)設(shè)置max-height屬性為T(mén)able指定最大高度。此時(shí)若表格所需的高度大于最大高度, 則會(huì)顯示一個(gè)滾動(dòng)條。</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="市區(qū)" 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: '普陀區(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>2.11. 在components下創(chuàng)建MultiHeadTable.vue
<template><div><h1>多級(jí)表頭-數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候, 可使用多級(jí)表頭來(lái)展現(xiàn)數(shù)據(jù)的層次關(guān)系</h1><h4>只需要在el-table-column里面嵌套el-table-column, 就可以實(shí)現(xiàn)多級(jí)表頭。</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="市區(qū)" 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: '普陀區(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>2.12. 在components下創(chuàng)建RadioTable.vue
<template><div><h1>單選-選擇單行數(shù)據(jù)時(shí)使用色塊表示</h1><h4>Table組件提供了單選的支持, 只需要配置highlight-current-row屬性即可實(shí)現(xiàn)單選。之后由current-change事件來(lái)管理選中時(shí)觸發(fā)的事件, 它會(huì)傳入currentRow, oldCurrentRow。如果需要顯示索引, 可以增加一列el-table-column, 設(shè)置type屬性為index即可顯示從1開(kāi)始的索引號(hào)。</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: '上海市普陀區(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>2.13. 在components下創(chuàng)建CheckboxTable.vue
<template><div><h1>多選-選擇多行數(shù)據(jù)時(shí)使用Checkbox</h1><h4>實(shí)現(xiàn)多選非常簡(jiǎn)單: 手動(dòng)添加一個(gè)el-table-column, 設(shè)type屬性為selection即可; 默認(rèn)情況下若內(nèi)容過(guò)多會(huì)折行顯示, 若需要單行顯示可以使用show-overflow-tooltip屬性, 它接受一個(gè)Boolean, 為true時(shí)多余的內(nèi)容會(huì)在hover時(shí)以tooltip的形式顯示出來(lái)。</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]])">切換第二、第三行的選中狀態(tài)</el-button><el-button @click="toggleSelection()">取消選擇</el-button></div></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>2.14. 在components下創(chuàng)建SortTable.vue
<template><div><h1>排序-對(duì)表格進(jìn)行排序, 可快速查找或?qū)Ρ葦?shù)據(jù)</h1><h4>在列中設(shè)置sortable屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序, 接受一個(gè)Boolean, 默認(rèn)為false。可以通過(guò)Table的default-sort屬性設(shè)置默認(rèn)的排序列和排序順序。可以使用sort-method或者sort-by使用自定義的排序規(guī)則。如果需要后端排序, 需將sortable設(shè)置為custom, 同時(shí)在Table上監(jiān)聽(tīng)sort-change事件, 在事件回調(diào)中可以獲取當(dāng)前排序的字段名和排序順序, 從而向接口請(qǐng)求排序后的表格數(shù)據(jù)。在本例中, 我們還使用了formatter屬性, 它用于格式化指定列的值, 接受一個(gè)Function, 會(huì)傳入四個(gè)參數(shù): row, column, cellValue和index, 可以根據(jù)自己的需求進(jìn)行處理。</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: '上海市普陀區(qū)金沙江路 1518 弄'}, {date: '2016-05-04',name: 'b王小虎',address: '上海市普陀區(qū)金沙江路 1517 弄'}, {date: '2016-05-01',name: 'a王小虎',address: '上海市普陀區(qū)金沙江路 1519 弄'}, {date: '2016-05-03',name: 'c王小虎',address: '上海市普陀區(qū)金沙江路 1516 弄'}]}},methods: {formatter (row, column, cellValue, index) {return index + row.address}} } </script>2.15. 在components下創(chuàng)建FiltersTable.vue
<template><div><h1>篩選-對(duì)表格進(jìn)行篩選, 可快速查找到自己想看的數(shù)據(jù)</h1><h4>在列中設(shè)置filtersfilter-method屬性即可開(kāi)啟該列的篩選, filters是一個(gè)數(shù)組, filter-method是一個(gè)方法, 它用于決定某些數(shù)據(jù)是否顯示, 會(huì)傳入三個(gè)參數(shù): 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="標(biāo)簽" 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">清除日期過(guò)濾器</el-button><el-button @click="clearFilter">清除所有過(guò)濾器</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: '上海市普陀區(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.propertyreturn row[property] === value}} } </script>2.16. 在components下創(chuàng)建ScopedTable.vue
<template><div><h1>自定義列模板-自定義列的顯示內(nèi)容，可組合其他組件使用</h1><h4>通過(guò)Scoped slot可以獲取到row, column, $index和store(table內(nèi)部的狀態(tài)管理)的數(shù)據(jù)。</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: '上海市普陀區(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>2.17. 在components下創(chuàng)建ExpandTable.vue
<template><div><h1>展開(kāi)行-當(dāng)行內(nèi)容過(guò)多并且不想顯示橫向滾動(dòng)條時(shí), 可以使用Table展開(kāi)行功能</h1><h4>通過(guò)設(shè)置type="expand"和Scoped slot可以開(kāi)啟展開(kāi)行功能, el-table-column的模板會(huì)被渲染成為展開(kāi)行的內(nèi)容, 展開(kāi)行可訪(fǎng)問(wèn)的屬性與使用自定義列模板時(shí)的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="商品名稱(chēng)"><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="商品分類(lèi)"><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="商品名稱(chēng)" 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: '荷蘭優(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>2.18. 在components下創(chuàng)建ShowSummaryTable.vue
<template><div><h1>表尾合計(jì)行-若表格展示的是各類(lèi)數(shù)字, 可以在表尾顯示各列的合計(jì)</h1><h4>將show-summary設(shè)置為true就會(huì)在表格尾部展示合計(jì)行。默認(rèn)情況下, 對(duì)于合計(jì)行, 第一列不進(jìn)行數(shù)據(jù)求合操作, 而是顯示「合計(jì)」二字(可通過(guò)sum-text配置), 其余列會(huì)將本列所有數(shù)值進(jìn)行求合操作, 并顯示出來(lái)。當(dāng)然, 你也可以定義自己的合計(jì)邏輯。使用summary-method并傳入一個(gè)方法, 返回一個(gè)數(shù)組, 這個(gè)數(shù)組中的各項(xiàng)就會(huì)顯示在合計(jì)行的各列中, 具體可以參考本例中的第二個(gè)表格。</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="數(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 :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></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] = '總價(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>2.19. 在components下創(chuàng)建SpanMethodTable.vue
<template><div><h1>合并行或列-多行或多列共用一個(gè)數(shù)據(jù)時(shí), 可以合并行或列</h1><h4>通過(guò)給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ì)象。</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="數(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>2.20. 在components下創(chuàng)建IndexTable.vue
<template><div><h1>自定義索引-自定義type=index列的行號(hào)</h1><h4>通過(guò)給type=index的列傳入index屬性, 可以自定義索引。該屬性傳入數(shù)字時(shí), 將作為索引的起始值。也可以傳入一個(gè)方法, 它提供當(dāng)前行的行號(hào)(從0開(kāi)始)作為參數(shù), 返回值將作為索引展示。</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: '普陀區(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>2.21. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/BaseTable
2.22. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/StripeTable?
2.23. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/HighlightTable
2.24. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/BorderTable?
2.25. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/FixHeadTable?
2.26. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/FixColTable?
2.27. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/FixHeadColTable?
2.28. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/MaxHeightTable?
2.29. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/MultiHeadTable?
2.30. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/RadioTable?
2.31. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/CheckboxTable?
2.32. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/SortTable?
2.33. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/FiltersTable?
2.34. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ScopedTable
2.35. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ExpandTable?
2.36. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ShowSummaryTable?
2.37. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/SpanMethodTable?
2.38. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/IndexTable?
總結(jié)
以上是生活随笔為你收集整理的022_Table表格的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 026_Pagination分页
- 下一篇： 028_Alert警告