在封裝Vue組件時(shí)，我依舊會(huì)交叉使用函數(shù)式組件的方式來實(shí)現(xiàn)。關(guān)于函數(shù)式組件，我們可以把它想像成組件里的一個(gè)函數(shù)，入?yún)⑹卿秩旧舷挛?render context)，返回值是渲染好的HTML(VNode)。它比較適用于外層組件僅僅是對(duì)內(nèi)層組件的一次邏輯封裝，而渲染的模板結(jié)構(gòu)變化擴(kuò)展不多的情況，且它一定是無狀態(tài)、無實(shí)例的，無狀態(tài)就意味著它沒有created、mounted、updated等Vue的生命周期函數(shù)，無實(shí)例就意味著它沒有響應(yīng)式數(shù)據(jù)data和this上下文。

我們先來一個(gè)簡單的Vue函數(shù)式組件的例子吧，然后照著這個(gè)例子來詳細(xì)介紹一下。

export default { functional: true, props: {}, render(createElement, context) { return createElement(’span’, ’hello world’) }}

Vue提供了一個(gè)functional開關(guān)，設(shè)置為true后，就可以讓組件變?yōu)闊o狀態(tài)、無實(shí)例的函數(shù)式組件。因?yàn)橹皇呛瘮?shù)，所以渲染的開銷相對(duì)來說較小。

函數(shù)式組件中的Render函數(shù)，提供了兩個(gè)參數(shù)createElement和context，我們先來了解下第一個(gè)參數(shù)createElement。

createElement說白了就是用來創(chuàng)建虛擬DOM節(jié)點(diǎn)VNode的。它接收三個(gè)參數(shù)，第一個(gè)參數(shù)可以是DOM節(jié)點(diǎn)字符串，也可以是一個(gè)Vue組件，還可以是一個(gè)返回字符串或Vue組件的函數(shù)；第二個(gè)參數(shù)是一個(gè)對(duì)象，這個(gè)參數(shù)是可選的，定義了渲染組件所需的參數(shù)；第三個(gè)參數(shù)是子級(jí)虛擬節(jié)點(diǎn)，可以是一個(gè)由createElement函數(shù)創(chuàng)建的組件，也可以是一個(gè)普通的字符串如：’hello world’，還可以是一個(gè)數(shù)組，當(dāng)然也可以是一個(gè)返回字符串或Vue組件的函數(shù)。

createElement有幾點(diǎn)需要注意：

createElement第一個(gè)參數(shù)若是組件，則第三個(gè)參數(shù)可省略，即使寫上去也無效； render函數(shù)在on事件中可監(jiān)聽組件$emit發(fā)出的事件 在2.3.0之前的版本中，如果一個(gè)函數(shù)式組件想要接收prop，則props選項(xiàng)是必須的。在2.3.0或以上的版本中，你可以省略props選項(xiàng)，組件上所有的attribute都會(huì)被自動(dòng)隱式解析為prop。

函數(shù)式組件中Render的第二個(gè)參數(shù)是context上下文，data、props、slots、children以及parent都可以通過context來訪問。

在2.5.0及以上版本中，如果你使用了單文件組件，那么基于模板的函數(shù)式組件可以這樣聲明：<template functional></template>， 但是如果Vue組件中的render函數(shù)存在，則Vue構(gòu)造函數(shù)不會(huì)從template選項(xiàng)或通過el選項(xiàng)指定的掛載元素中提取出的HTML模板編譯渲染函數(shù)，也就是說一個(gè)組件中templete和render函數(shù)不能共存，如果一個(gè)組件中有了templete，即使有了render函數(shù)，render函數(shù)也不會(huì)執(zhí)行，因?yàn)閠emplate選項(xiàng)的優(yōu)先級(jí)比render選項(xiàng)的優(yōu)先級(jí)高。

到這里，Vue函數(shù)式組件介紹的就差不多了，我們就來看看Element的表格組件是如何通過函數(shù)式組件來實(shí)現(xiàn)封裝的吧。

效果圖：

1、所封裝的table組件：

<template> <div> <el-table :data='cfg.data' v-on='cfg.on' v-bind='attrs' v-loading='loading'> <el-table-column v-if='cfg.hasCheckbox' v-bind='selectionAttrs' type='selection' label='xx' /> <el-table-column v-for='n in cfg.headers' :prop='n.prop' :label='n.label' :key='n.prop' v-bind='{...columnAttrs, ...n.attrs}'> <template slot-scope='{row}'> <slot :name='n.prop' :row='row'><Cell :config='n' :data='row' /></slot> </template> </el-table-column> </el-table> <el-pagination v-if='showPage' layout='total, sizes, prev, pager, next, jumper' :page-sizes='[2, 3, 6, 11]' :page-size='page.size' :total='page.total' :current-page='page.page' @current-change='loadPage' @size-change='sizeChange' /> </div></template><script>import Cell from ’./cell’export default { components: { Cell, }, props: { config: Object, }, data(){ return { loading: true, columnAttrs: { align: ’left’, resizable: false, }, cfg: { on: this.getTableEvents(), attrs: { border: true, stripe: true, }, data: [], ...this.config, }, page: { size: this.config.size || 10, page: 1, total: 0, }, checked: [], } }, created(){ this.load(); }, computed: { selectionAttrs(){ let {selectable, reserveSelection = false} = this.config || {}, obj = {}; // checkBox是否可以被選中 if(selectable && typeof selectable == ’function’){ Object.assign(obj, { selectable, }) } //reserve-selection僅對(duì)type=selection的列有效，類型為Boolean，為true則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key） if(reserveSelection){ Object.assign(obj, { ’reserve-selection’: reserveSelection, }) } return obj; }, attrs(){ let {config: {spanMethod, rowKey}, cfg: {attrs}} = this; // 合并單元格 - spanMethod是父組件傳過來的合并單元格的方法，請(qǐng)參照element合并單元格 if(spanMethod && typeof spanMethod == ’function’){ Object.assign(attrs, { ’span-method’: spanMethod, }) } // 表格跨頁選中，需要設(shè)置row-key和reserve-selection，reserve-selection只能且必須設(shè)置在type為selection的el-table-column上 if(rowKey && typeof rowKey == ’function’){ Object.assign(attrs, { ’row-key’: rowKey, }) } return attrs; }, showPage(){ let {size, total} = this.page; return size < total; }, }, methods: { getTableEvents(){ let {hasCheckbox = false} = this.config || {}, events = {}, _this = this; if(hasCheckbox){ // 綁定事件 Object.assign(events, { ’selection-change’(v){ _this.checked = v; }, }); } return events; }, // 獲取勾選的行 getChecked(){ return this.checked; }, // 請(qǐng)求數(shù)據(jù) load(p = {}){ let { size, page } = this.page, {loadData = () => Promise.resolve({})} = this.config; this.loading = true; // 這里loadData的參數(shù)在初始化時(shí)只有分頁所需的page和size，至于接口需要的其他參數(shù)，是在父組件的loadData中傳遞 loadData({...p, page, size}).then(({data, total}) => { this.cfg.data = data; this.page.page = page; this.page.total = total; this.loading = false; }); }, loadPage(index){ this.page.page = index this.load(); }, sizeChange(size){ this.page.size = size this.load(); }, // 一般在點(diǎn)擊查詢按鈕或局部刷新表格列表時(shí)，可調(diào)用此方法，如果不傳參數(shù)，則默認(rèn)從第一頁開始 reload(p = {}){ this.page.page = 1 this.load(p); }, },}</script>2、匯總表格每一列的cell.js：

import * as Components from ’./components’;let empty = ’-’export default { props: { config: Object, data: Object, }, functional: true, render: (h, c) => { let {props: {config = {}, data = {}}} = c, {prop, type = ’Default’} = config, value = data[prop] || config.value, isEmpty = value === ’’ || value === undefined; return isEmpty ? h(Components.Default, {props: {value: empty}}) : h(Components[type], {props: {value, empty, data, ...config}}); }}3、本次封裝將每一列的渲染單獨(dú)分開成多個(gè)vue組件，最后再合并在一個(gè)components.js文件中一起進(jìn)行匹配。

1）整合文件components.js：

import Date from ’./Date’;import Default from ’./Default’;import Currency from ’./Currency’;import Enum from ’./Enum’;import Action from ’./Action’;import Link from ’./Link’;import Format from ’./Format’;import Popover from ’./Popover’;export { Default, Date, Currency, Enum, Action, Link, Format, Popover,}

2）日期列Date.vue

<template functional> <span>{{props.value | date(props.format)}}</span></template>

3）默認(rèn)列Default.vue

<template functional> <span>{{props.value}}</span></template>

4）金額千分位列Currency.vue

<template functional> <span>{{props.value | currency}}</span></template>

5）映射列Enum.js

let mapIdAndKey = list => list.reduce((c, i) => ({...c, [i.key]: i}), {});let STATUS = { order: mapIdAndKey([ { id: ’draft’, key: ’CREATED’, val: ’未提交’, }, { id: ’pending’, key: ’IN_APPROVAL’, val: ’審批中’, }, { id: ’reject’, key: ’REJECT’, val: ’審批駁回’, }, { id: ’refuse’, key: ’REFUSE’, val: ’審批拒絕’, }, { id: ’sign’, key: ’CONTRACT_IN_SIGN’, val: ’合同簽署中’, }, { id: ’signDone’, key: ’CONTRACT_SIGNED’, val: ’合同簽署成功’, }, { id: ’lendDone’, key: ’LENDED’, val: ’放款成功’, }, { id: ’lendReject’, key: ’LOAN_REJECT’, val: ’放款駁回’, }, { id: ’cancel’, key: ’CANCEL’, val: ’取消成功’, }, { id: ’inLend’, key: ’IN_LOAN’, val: ’放款審批中’, }, ]), monitor: mapIdAndKey([ { key: ’00’, val: ’未監(jiān)控’, }, { key: ’01’, val: ’監(jiān)控中’, }, ]),}export default { functional: true, render(h, {props: {value, Enum, empty}, parent}){ let enums = Object.assign({}, STATUS, parent.$store.getters.dictionary), {name = ’’, getVal = (values, v) => values[v]} = Enum, _value = getVal(enums[name], value); if( _value === undefined) return h(’span’, _value === undefined ? empty : _value); let {id, val} = _value; return h(’span’, {staticClass: id}, [h(’span’, val)]); }}

6）操作列Action.js

const getAcitons = (h, value, data) => { let result = value.filter(n => { let {filter = () => true} = n; return filter.call(n, data); }); return result.map(a => h(’span’, {class: ’btn’, on: {click: () => a.click(data)}, key: a.prop}, a.label))}export default { functional: true, render: (h, {props: {value, data}}) => { return h(’div’, {class: ’action’}, getAcitons(h, value, data)) },}

7）帶有可跳轉(zhuǎn)鏈接的列Link.vue

<template> <router-link :to='{ path, query: params }'>{{value}}</router-link></template><script>export default { props: { data: Object, value: String, query: { type: Function, default: () => { return { path: ’’, payload: {} } } }, }, computed: { // 路由path path(){ const { path } = this.query(this.data) return path }, params(){ const { payload } = this.query(this.data) return payload }, },}</script>

8）自定義想要展示的數(shù)據(jù)格式Format.vue

<template functional> <div v-html='props.format(props.value, props.data)' /></template>

9）當(dāng)內(nèi)容過多需要省略并在鼠標(biāo)移入后彈出一個(gè)提示窗顯示全部內(nèi)容的列Popover.vue

<template functional> <el-popover placement='top-start' trigger='hover' popper- :content='props.value'> <span slot='reference' class='popover-txt'>{{props.value}}</span> </el-popover></template><style scoped>.popover-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block; cursor: pointer;}</style>

從以上代碼中可以看出，我既使用了基于render函數(shù)類型的函數(shù)式組件也使用了基于模板的函數(shù)式組件，主要是為了在封裝時(shí)的方便，畢竟使用render這個(gè)最接近編譯器的函數(shù)還是有點(diǎn)麻煩的，不如基于模板的函數(shù)式組件來的方便。

4、使用封裝后的表格table組件

1）不使用插槽：

<template> <div style='margin: 20px;'> <el-button type='primary' v-if='excelExport' @click='download'>獲取勾選的表格數(shù)據(jù)</el-button> <Table :config='config' ref='table' /> </div></template><script>import Table from ’@/components/table’export default { components: { Table, }, data() { return { config: { headers: [ {prop: ’contractCode’, label: ’業(yè)務(wù)編號(hào)’, attrs: {width: 200, align: ’center’}}, {prop: ’payeeAcctName’, label: ’收款賬戶名’, type: ’Link’, query: row => this.query(row), attrs: {width: 260, align: ’right’}}, {prop: ’tradeAmt’, label: ’付款金額’, type: ’Currency’}, {prop: ’status’, label: ’操作狀態(tài)’, type: ’Enum’, Enum: {name: ’order’}}, {prop: ’statistic’, label: ’預(yù)警統(tǒng)計(jì)’, type: ’Format’, format: val => this.format(val)}, //自定義展示自己想要的數(shù)據(jù)格式 {prop: ’reason’, label: ’原因’, type: ’Popover’}, {prop: ’payTime’, label: ’付款時(shí)間’, type: 'Date', format: ’yyyy-MM-dd hh:mm:ss’}, //不設(shè)置format的話，日期格式默認(rèn)為yyyy/MM/dd {prop: ’monitorStatus’, label: ’當(dāng)前監(jiān)控狀態(tài)’, type: ’Enum’, Enum: {name: ’monitor’}}, ].concat(this.getActions()), //通過接口獲取列表數(shù)據(jù) - 這里的參數(shù)p就是子組件傳過來的包含分頁的參數(shù) loadData: p => request.post(’permission/list’, {...this.setParams(), ...p}), hasCheckbox: true, selectable: this.selectable, reserveSelection: false, rowKey: row => row.id, }, status: '01', permission: ['handle', 'pass', 'refuse', 'reApply', ’export’] } }, computed: { handle() { return this.permission.some(n => n == 'handle'); }, pass() { return this.permission.some(n => n == 'pass'); }, reject() { return this.permission.some(n => n == 'reject'); }, refuse() { return this.permission.some(n => n == 'refuse'); }, excelExport(){ return this.permission.some(n => n == 'handle') && this.permission.some(n => n == 'export'); }, }, methods: { getActions(){ return {prop: ’action’, name: ’操作’, type: 'Action', value: [ {label: '查看', click: data => {console.log(data)}}, {label: '辦理', click: data => {}, filter: ({status}) => status == ’CREATED’ && this.handle}, {label: '通過', click: data => {}, filter: ({status}) => status == ’PASS’ && this.pass}, {label: '駁回', click: data => {}, filter: ({status}) => status == ’REJECT’ && this.reject}, {label: '拒絕', click: data => {}, filter: ({status}) => status == ’CREATED’ && this.refuse}, ]} }, setParams(){ return { name: ’測試’, status: ’01’, type: ’CREATED’, } }, query(row){ return { path: ’/otherElTable’, // 路由path payload: { id: row.id, type: ’link’ } } }, format(val){ let str = ’’; val.forEach(t => { str += ’<span style='margin-right:5px;'>’ + t.total + ’</span>’; }) return str; }, selectable({status}){ return status == 'REFUSE' ? false : true }, download(){ console.log(this.$refs.table.getChecked()) }, },};</script><style>.action span{margin-right:10px;color:#359C67;cursor: pointer;}</style>

2）使用插槽：

<Table :config='config' ref='table'> <template #statistic='{row}'> <div v-html='loop(row.statistic)'></div> </template> <template #payeeAcctName='{row}'> {{row.payeeAcctName}} </template> <template #tradeAmt='{row}'> {{row.tradeAmt | currency}} </template> <template v-slot:reason='{row}'> <template v-if='!row.reason'>-</template> <el-popover v-else placement='top-start' trigger='hover' popper- :content='row.reason'> <span slot='reference' class='popover-txt'>{{row.reason}}</span> </el-popover> </template> <template #payTime='{row}'> {{row.payTime | date(’yyyy-MM-dd hh:mm:ss’)}} </template> <template #customize='{row}'> {{customize(row.customize)}} </template> <template #opt='{row}'> <div class='action'> <span>查看</span> <span v-if='row.status == ’CREATED’ && handle'>辦理</span> <span v-if='row.status == ’PASS’ && pass'>通過</span> <span v-if='row.status == ’REJECT’ && reject'>駁回</span> <span v-if='row.status == ’REFUSE’ && refuse'>拒絕</span> </div> </template> </Table><script>import Table from ’@/components/table’export default { components: { Table, }, data(){ return { config: { headers: [ {prop: ’contractCode’, label: ’業(yè)務(wù)編號(hào)’, attrs: {width: 200, align: ’center’}}, {prop: ’payeeAcctName’, label: ’收款賬戶名’, attrs: {width: 260, align: ’right’}}, {prop: ’tradeAmt’, label: ’付款金額’}, {prop: ’status’, label: ’操作狀態(tài)’, type: ’Enum’, Enum: {name: ’order’}}, {prop: ’statistic’, label: ’預(yù)警統(tǒng)計(jì)’}, {prop: ’payTime’, label: ’付款時(shí)間’}, {prop: ’reason’, label: ’原因’}, {prop: ’monitorStatus’, label: ’當(dāng)前監(jiān)控狀態(tài)’, type: ’Enum’, Enum: {name: ’monitor’}}, {prop: ’customize’, label: ’自定義展示’, type: ’Format’, format: val => this.customize(val)}, {prop: ’opt’, label: ’操作’}, ], loadData: () => Promise.resolve({ data: [ {id: 1, contractCode: ’’, payeeAcctName: ’中國銀行上海分行’, tradeAmt: ’503869.265’, status: ’00’, payTime: 1593585652530, statistic:[{level: 3, total: 5},{level: 2, total: 7},{level: 1, total: 20},{level: 0, total: 0} ], customize: [’中國’, ’上海’, ’浦東新區(qū)’] }, {id: 2, contractCode: ’GLP-YG-B3-1111’, payeeAcctName: ’中國郵政上海分行’, tradeAmt: ’78956.85’, status: ’CREATED’, payTime: 1593416718317,reason: ’Popover的屬性與Tooltip很類似，它們都是基于Vue-popper開發(fā)的，因此對(duì)于重復(fù)屬性，請(qǐng)參考Tooltip的文檔，在此文檔中不做詳盡解釋。’, }, {id: 3, contractCode: ’HT1592985730310’, payeeAcctName: ’招商銀行上海支行’, tradeAmt: ’963587123’, status: ’PASS’, payTime: 1593420950772, monitorStatus: ’01’}, {id: 4, contractCode: ’pi239’, payeeAcctName: ’廣州物流有限公司’, tradeAmt: ’875123966’, status: ’REJECT’, payTime: 1593496609363}, {id: 5, contractCode: ’0701001’, payeeAcctName: ’建設(shè)銀行上海分賬’, tradeAmt: ’125879125’, status: ’REFUSE’, payTime: 1593585489177}, ], }), }, permission: ['handle', 'pass', 'refuse', 'reApply', ’export’], } }, computed: { handle() { return this.permission.some(n => n == 'handle'); }, pass() { return this.permission.some(n => n == 'pass'); }, reject() { return this.permission.some(n => n == 'reject'); }, refuse() { return this.permission.some(n => n == 'refuse'); }, excelExport(){ return this.permission.some(n => n == 'handle') && this.permission.some(n => n == 'export'); }, }, methods: { query(row){ return { path: ’/otherElTable’, // 路由path payload: { id: row.id, type: ’link’ } } }, loop(val){ if(!val) return ’-’ let str = ’’; val.forEach(t => { str += ’<span style='margin-right:5px;'>’ + t.total + ’</span>’; }) return str; }, customize(v){ return v ? v[0] + v[1] + v[2] : ’-’ } }}</script>

在兩個(gè)不太相同的使用方式中，第一種是不基于插槽實(shí)現(xiàn)的，第二種是基于插槽實(shí)現(xiàn)的。通過兩種方式的對(duì)比，可以看出在第二種使用方式中，但凡是使用了插槽的列，在headers數(shù)組中其已經(jīng)不再定義type字段了，即使定義了type，它也不起作用，起作用的是插槽，而且也不再使用concat去拼接一個(gè)操作列了，操作列也是通過插槽來渲染的，只是如果很多列都通過插槽的形式實(shí)現(xiàn)，私心覺得頁面看起來就不那么整潔了。

多說一句，既然我們已經(jīng)對(duì)大部分場景的實(shí)現(xiàn)進(jìn)行了封裝，那么大家在使用時(shí)就沒必要再通過插槽的形式去多此一舉了，盡量保持頁面的整潔。如果你實(shí)在覺得在headers數(shù)組后邊再concat一個(gè)操作列的方式有點(diǎn)別扭，那么就只需將操作列通過插槽的形式去實(shí)現(xiàn)就OK了。本博客中提到的插槽實(shí)現(xiàn)形式，只是為了給大家多一種選擇而已。

最后，關(guān)于金額千分位和時(shí)間戳格式化的實(shí)現(xiàn)，這里就不再貼代碼了，可自行實(shí)現(xiàn)。

最近又想了一下封裝的這個(gè)table組件，想著說在原來封裝的基礎(chǔ)上還有沒有其他的實(shí)現(xiàn)方法，比如我不想在原來定義的headers數(shù)組后邊再concat一個(gè)操作列，再比如表格的某一列的數(shù)據(jù)處理方法不包含在我們之前所封裝的那些方法當(dāng)中，或者說作為第一次使用這個(gè)table組件的前端開發(fā)人員，我不太習(xí)慣你的那種寫法，那我可不可以在你封裝的基礎(chǔ)上自己寫一些處理方法呢，答案是可以的，當(dāng)然我們說既然已經(jīng)封裝好了組件，那么大家就按照一個(gè)套路來，省時(shí)又省力，何樂而不為呢？但有一說一，我們本著學(xué)習(xí)的態(tài)度，本著藝多不壓身的出發(fā)點(diǎn)來看的話，多學(xué)多思考多動(dòng)手，總歸是有益于進(jìn)步的。只是在實(shí)際的開發(fā)過程中，我們盡量要選擇一種封裝方式，然后大家一起遵守這個(gè)約定就好了。

其實(shí)說了這么多廢話，這次變更也是沒有多大力度的，只是在原來封裝的基礎(chǔ)上增加了插槽而已。看過本篇博客的你一定還記得我封裝的代碼中有一段專門用來處理每一列數(shù)據(jù)的代碼吧：<Cell :config='n' :data='row' />對(duì)，就是它。對(duì)于它，我不想再多說了，上邊已經(jīng)做了介紹了。本次變更，我們主要用到的是插槽。

插槽這個(gè)API，VUE的官網(wǎng)和網(wǎng)上的各種文章介紹已經(jīng)講的很清楚了，它大概分為：默認(rèn)插槽（也有人管它叫匿名插槽）、具名插槽和作用域插槽。關(guān)于它們的介紹，請(qǐng)自行查閱官網(wǎng)或網(wǎng)上的各種文章資料。本次變更主要用到的就是具名插槽和作用域插槽。具名插槽，顧名思義就是帶有名稱的插槽，我們本次封裝所使用的插槽的名稱來自于table的每一列的prop。作用域插槽在本次封裝中的作用主要就是通過子組件的插槽向父組件傳值，其實(shí)現(xiàn)形式有點(diǎn)類似于vue父組件向子組件傳值，只不過兩者的接收值的方式不同。總之此次變更實(shí)現(xiàn)起來還是很簡單的，就是在<Cell :config='n' :data='row' />的外邊再包一層具名插槽就可以了。<slot :name='n.prop' :row='row'><Cell :config='n' :data='row' /></slot>就醬。

接下來，我們就可以回答上邊我們提出的那些問題了。來看答案：

<Table :config='config' ref='table'> <template #payTime='{row}'> {{row.payTime | date(’yyyy-MM-dd hh:mm:ss’)}} </template> <template #customize='{row}'> {{customize(row.customize)}} </template> <template #opt='{row}'> <div class='action'> <span>查看</span> <span v-if='row.status == ’CREATED’ && handle'>辦理</span> <span v-if='row.status == ’PASS’ && pass'>通過</span> <span v-if='row.status == ’REJECT’ && reject'>駁回</span> <span v-if='row.status == ’REFUSE’ && refuse'>拒絕</span> </div> </template></Table>

以上就是對(duì)某些特殊情況，而你又不想使用我最開始封裝的那些方法來實(shí)現(xiàn)，那么可以，我就再為你提供一個(gè)其他的“特殊服務(wù)”。這里要注意，如果你使用插槽來自己渲染數(shù)據(jù)，那么在headers數(shù)組中，你需要提供表格頭部的渲染，而不需要再加入type字段即可。比如最開始渲染表格的日期列時(shí)我們是這么寫的：{prop: ’payTime’, label: ’付款時(shí)間’, type: 'Date', format: ’yyyy-MM-dd hh:mm:ss’}那么如果你使用插槽來自己渲染數(shù)據(jù)，這里的寫法就要變成了這樣：{prop: ’payTime’, label: ’付款時(shí)間’}還有之前我們定義操作列是在headers數(shù)組的后邊再concat了一個(gè)數(shù)組，如果你使用插槽來自己渲染數(shù)據(jù)，那么就不需要再concat一個(gè)數(shù)組了，而是在headers數(shù)組中再加一個(gè){prop: ’opt’, label: ’操作’}就可以了。

其實(shí)，這次變更說的是在原來的基礎(chǔ)上重新包裝了一層插槽，那么對(duì)于那些不需要我們自行處理數(shù)據(jù)，只需直接展示接口返回的數(shù)據(jù)的情況，我們?cè)谑褂眠@個(gè)封裝的table組件時(shí)也不需要進(jìn)行什么特殊處理，更不需要像上邊使用插槽那樣去定義，只要還是跟之前一樣在headers數(shù)組中正常定義就可以了。因?yàn)椴宀勐铮悴欢x具名插槽，也不定義默認(rèn)插槽，那么插槽中顯示的就是包裹在插槽標(biāo)簽slot中的<Cell :config='n' :data='row' />明白了吧。

多說一句，你說我不想使用插槽去處理日期、金額千分位這些列，那么你依舊可以根據(jù)上邊我介紹的插槽的原理，在headers數(shù)組中依舊這樣定義就OK了:

{prop: ’tradeAmt’, label: ’付款金額’, type: ’Currency’},{prop: ’payTime’, label: ’付款時(shí)間’, type: 'Date'},

寫到這里，其實(shí)我想說，即使加上了插槽，那么對(duì)之前的那些使用方法來說，基本沒啥影響，你該怎么用還怎么用，我只是給你提供了更多的選擇而已。

如果你實(shí)在不想用插槽，想保持頁面的整潔，那你在<Cell :config='n' :data='row' />這段代碼的外面包裹不包裹一層插槽都無所謂，直接使用上文中我介紹的第一種使用方法就可以了。

作者：小壞

出處：http://tnnyang.cnblogs.com

以上就是如何封裝Vue Element的table表格組件的詳細(xì)內(nèi)容，更多關(guān)于封裝Vue Element的table表格組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！