如何封裝Vue Element的table表格組件
在封裝Vue組件時(shí)，我依舊會(huì)交叉使用函數(shù)式組件的方式來(lái)實(shí)現(xiàn)。關(guān)于函數(shù)式組件，我們可以把它想像成組件里的一個(gè)函數(shù)，入?yún)⑹卿秩旧舷挛?render context)，返回值是渲染好的HTML(VNode)。它比較適用于外層組件僅僅是對(duì)內(nèi)層組件的一次邏輯封裝，而渲染的模板結(jié)構(gòu)變化擴(kuò)展不多的情況，且它一定是無(wú)狀態(tài)、無(wú)實(shí)例的，無(wú)狀態(tài)就意味著它沒(méi)有created、mounted、updated等Vue的生命周期函數(shù)，無(wú)實(shí)例就意味著它沒(méi)有響應(yīng)式數(shù)據(jù)data和this上下文。
我們先來(lái)一個(gè)簡(jiǎn)單的Vue函數(shù)式組件的例子吧，然后照著這個(gè)例子來(lái)詳細(xì)介紹一下。
export default {
functional: true,
props: {},
render(createElement, context) {
return createElement('span', 'hello world')
}
}
Vue提供了一個(gè)functional開(kāi)關(guān)，設(shè)置為true后，就可以讓組件變?yōu)闊o(wú)狀態(tài)、無(wú)實(shí)例的函數(shù)式組件。因?yàn)橹皇呛瘮?shù)，所以渲染的開(kāi)銷(xiāo)相對(duì)來(lái)說(shuō)較小。
函數(shù)式組件中的Render函數(shù)，提供了兩個(gè)參數(shù)createElement和context，我們先來(lái)了解下第一個(gè)參數(shù)createElement。
createElement說(shuō)白了就是用來(lái)創(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ù)可省略，即使寫(xiě)上去也無(wú)效；
- render函數(shù)在on事件中可監(jiān)聽(tīng)組件$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都可以通過(guò)context來(lái)訪問(wèn)。
在2.5.0及以上版本中，如果你使用了單文件組件，那么基于模板的函數(shù)式組件可以這樣聲明：<template functional></template>， 但是如果Vue組件中的render函數(shù)存在，則Vue構(gòu)造函數(shù)不會(huì)從template選項(xiàng)或通過(guò)el選項(xiàng)指定的掛載元素中提取出的HTML模板編譯渲染函數(shù)，也就是說(shuō)一個(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ù)式組件介紹的就差不多了，我們就來(lái)看看Element的表格組件是如何通過(guò)函數(shù)式組件來(lái)實(shí)現(xiàn)封裝的吧。
效果圖：
1、所封裝的table組件：
<template>
<div>
<el-table :data="cfg.data" style="width: 100%" v-on="cfg.on" v-bind="attrs" v-loading="loading">
<el-table-column v-if="cfg.hasCheckbox" v-bind="selectionAttrs" type="selection" width="55" 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
class="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的列有效，類(lèi)型為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是父組件傳過(guò)來(lái)的合并單元格的方法，請(qǐng)參照element合并單元格
if(spanMethod && typeof spanMethod == 'function'){
Object.assign(attrs, {
'span-method': spanMethod,
})
}
// 表格跨頁(yè)選中，需要設(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í)只有分頁(yè)所需的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)從第一頁(yè)開(kāi)始
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ú)分開(kāi)成多個(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)容過(guò)多需要省略并在鼠標(biāo)移入后彈出一個(gè)提示窗顯示全部?jī)?nèi)容的列Popover.vue
<template functional>
<el-popover
placement="top-start"
width="300"
trigger="hover"
popper-class="popover"
: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ù)類(lèi)型的函數(shù)式組件也使用了基于模板的函數(shù)式組件，主要是為了在封裝時(shí)的方便，畢竟使用render這個(gè)最接近編譯器的函數(shù)還是有點(diǎn)麻煩的，不如基于模板的函數(shù)式組件來(lái)的方便。
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()),
//通過(guò)接口獲取列表數(shù)據(jù) - 這里的參數(shù)p就是子組件傳過(guò)來(lái)的包含分頁(yè)的參數(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: "通過(guò)", 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: '測(cè)試',
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"
width="300"
trigger="hover"
popper-class="popover"
: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">通過(guò)</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: '中國(guó)銀行上海分行', 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: ['中國(guó)', '上海', '浦東新區(qū)']
},
{id: 2, contractCode: 'GLP-YG-B3-1111', payeeAcctName: '中國(guó)郵政上海分行', tradeAmt: '78956.85', status: 'CREATED', payTime: 1593416718317,
reason: 'Popover的屬性與Tooltip很類(lèi)似，它們都是基于Vue-popper開(kāi)發(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)的。通過(guò)兩種方式的對(duì)比，可以看出在第二種使用方式中，但凡是使用了插槽的列，在headers數(shù)組中其已經(jīng)不再定義type字段了，即使定義了type，它也不起作用，起作用的是插槽，而且也不再使用concat去拼接一個(gè)操作列了，操作列也是通過(guò)插槽來(lái)渲染的，只是如果很多列都通過(guò)插槽的形式實(shí)現(xiàn)，私心覺(jué)得頁(yè)面看起來(lái)就不那么整潔了。
多說(shuō)一句，既然我們已經(jīng)對(duì)大部分場(chǎng)景的實(shí)現(xiàn)進(jìn)行了封裝，那么大家在使用時(shí)就沒(méi)必要再通過(guò)插槽的形式去多此一舉了，盡量保持頁(yè)面的整潔。如果你實(shí)在覺(jué)得在headers數(shù)組后邊再concat一個(gè)操作列的方式有點(diǎn)別扭，那么就只需將操作列通過(guò)插槽的形式去實(shí)現(xiàn)就OK了。本博客中提到的插槽實(shí)現(xiàn)形式，只是為了給大家多一種選擇而已。
最后，關(guān)于金額千分位和時(shí)間戳格式化的實(shí)現(xiàn)，這里就不再貼代碼了，可自行實(shí)現(xiàn)。
最近又想了一下封裝的這個(gè)table組件，想著說(shuō)在原來(lái)封裝的基礎(chǔ)上還有沒(méi)有其他的實(shí)現(xiàn)方法，比如我不想在原來(lái)定義的headers數(shù)組后邊再concat一個(gè)操作列，再比如表格的某一列的數(shù)據(jù)處理方法不包含在我們之前所封裝的那些方法當(dāng)中，或者說(shuō)作為第一次使用這個(gè)table組件的前端開(kāi)發(fā)人員，我不太習(xí)慣你的那種寫(xiě)法，那我可不可以在你封裝的基礎(chǔ)上自己寫(xiě)一些處理方法呢，答案是可以的，當(dāng)然我們說(shuō)既然已經(jīng)封裝好了組件，那么大家就按照一個(gè)套路來(lái)，省時(shí)又省力，何樂(lè)而不為呢？但有一說(shuō)一，我們本著學(xué)習(xí)的態(tài)度，本著藝多不壓身的出發(fā)點(diǎn)來(lái)看的話，多學(xué)多思考多動(dòng)手，總歸是有益于進(jìn)步的。只是在實(shí)際的開(kāi)發(fā)過(guò)程中，我們盡量要選擇一種封裝方式，然后大家一起遵守這個(gè)約定就好了。
其實(shí)說(shuō)了這么多廢話，這次變更也是沒(méi)有多大力度的，只是在原來(lái)封裝的基礎(chǔ)上增加了插槽而已?？催^(guò)本篇博客的你一定還記得我封裝的代碼中有一段專門(mén)用來(lái)處理每一列數(shù)據(jù)的代碼吧：
<Cell :config="n" :data="row" />
對(duì)，就是它。對(duì)于它，我不想再多說(shuō)了，上邊已經(jīng)做了介紹了。本次變更，我們主要用到的是插槽。
插槽這個(gè)API，VUE的官網(wǎng)和網(wǎng)上的各種文章介紹已經(jīng)講的很清楚了，它大概分為：默認(rèn)插槽（也有人管它叫匿名插槽）、具名插槽和作用域插槽。關(guān)于它們的介紹，請(qǐng)自行查閱官網(wǎng)或網(wǎng)上的各種文章資料。本次變更主要用到的就是具名插槽和作用域插槽。具名插槽，顧名思義就是帶有名稱的插槽，我們本次封裝所使用的插槽的名稱來(lái)自于table的每一列的prop。作用域插槽在本次封裝中的作用主要就是通過(guò)子組件的插槽向父組件傳值，其實(shí)現(xiàn)形式有點(diǎn)類(lèi)似于vue父組件向子組件傳值，只不過(guò)兩者的接收值的方式不同。總之此次變更實(shí)現(xiàn)起來(lái)還是很簡(jiǎn)單的，就是在<Cell :config="n" :data="row" />的外邊再包一層具名插槽就可以了。
<slot :name="n.prop" :row="row"><Cell :config="n" :data="row" /></slot>
就醬。
接下來(lái)，我們就可以回答上邊我們提出的那些問(wèn)題了。來(lái)看答案：
<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">通過(guò)</span>
<span v-if="row.status == 'REJECT' && reject">駁回</span>
<span v-if="row.status == 'REFUSE' && refuse">拒絕</span>
</div>
</template>
</Table>
以上就是對(duì)某些特殊情況，而你又不想使用我最開(kāi)始封裝的那些方法來(lái)實(shí)現(xiàn)，那么可以，我就再為你提供一個(gè)其他的“特殊服務(wù)”。這里要注意，如果你使用插槽來(lái)自己渲染數(shù)據(jù)，那么在headers數(shù)組中，你需要提供表格頭部的渲染，而不需要再加入type字段即可。
比如最開(kāi)始渲染表格的日期列時(shí)我們是這么寫(xiě)的：
{prop: 'payTime', label: '付款時(shí)間', type: "Date", format: 'yyyy-MM-dd hh:mm:ss'}
那么如果你使用插槽來(lái)自己渲染數(shù)據(jù)，這里的寫(xiě)法就要變成了這樣：
{prop: 'payTime', label: '付款時(shí)間'}
還有之前我們定義操作列是在headers數(shù)組的后邊再concat了一個(gè)數(shù)組，如果你使用插槽來(lái)自己渲染數(shù)據(jù)，那么就不需要再concat一個(gè)數(shù)組了，而是在headers數(shù)組中再加一個(gè){prop: 'opt', label: '操作'}就可以了。
其實(shí)，這次變更說(shuō)的是在原來(lái)的基礎(chǔ)上重新包裝了一層插槽，那么對(duì)于那些不需要我們自行處理數(shù)據(jù)，只需直接展示接口返回的數(shù)據(jù)的情況，我們?cè)谑褂眠@個(gè)封裝的table組件時(shí)也不需要進(jìn)行什么特殊處理，更不需要像上邊使用插槽那樣去定義，只要還是跟之前一樣在headers數(shù)組中正常定義就可以了。因?yàn)椴宀勐?，你不定義具名插槽，也不定義默認(rèn)插槽，那么插槽中顯示的就是包裹在插槽標(biāo)簽slot中的<Cell :config="n" :data="row" />
明白了吧。
多說(shuō)一句，你說(shuō)我不想使用插槽去處理日期、金額千分位這些列，那么你依舊可以根據(jù)上邊我介紹的插槽的原理，在headers數(shù)組中依舊這樣定義就OK了:
{prop: 'tradeAmt', label: '付款金額', type: 'Currency'},
{prop: 'payTime', label: '付款時(shí)間', type: "Date"},
寫(xiě)到這里，其實(shí)我想說(shuō)，即使加上了插槽，那么對(duì)之前的那些使用方法來(lái)說(shuō)，基本沒(méi)啥影響，你該怎么用還怎么用，我只是給你提供了更多的選擇而已。
如果你實(shí)在不想用插槽，想保持頁(yè)面的整潔，那你在<Cell :config="n" :data="row" />這段代碼的外面包裹不包裹一層插槽都無(wú)所謂，直接使用上文中我介紹的第一種使用方法就可以了。
作者：小壞
以上就是如何封裝Vue Element的table表格組件的詳細(xì)內(nèi)容，更多關(guān)于封裝Vue Element的table表格組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家分享一篇解決使用vue.js路由后失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue全屏事件的開(kāi)發(fā)過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
antd vue 如何調(diào)整checkbox默認(rèn)樣式
這篇文章主要介紹了antd vue 如何調(diào)整checkbox默認(rèn)樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
VUE寫(xiě)一個(gè)簡(jiǎn)單的表格實(shí)例
在本篇文章里小編給大家整理的是關(guān)于VUE中表格的寫(xiě)法實(shí)例以及相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們可以參考下。2019-08-08
Vue中的總線Bus是一種通信機(jī)制，可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時(shí)需要注意Bus的命名和定義、監(jiān)聽(tīng)和觸發(fā)事件的方法、移除和銷(xiāo)毀Bus的時(shí)機(jī)和方式等問(wèn)題。合理使用總線Bus可以提高組件的復(fù)用性和可維護(hù)性，但過(guò)度依賴可能會(huì)導(dǎo)致代碼耦合和難以維護(hù)2023-04-04
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開(kāi)發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02