我們知道有很多系統(tǒng)都要求表格中添加各種各樣的tag，來標(biāo)記一些屬性。在element-ui中添加tag很簡單，最重要的就是用到了vue的插槽slot這個特性。首先了解什么是插槽。

插槽

省去官方的復(fù)雜講解和代碼，插槽的意思簡單來說，就是在子組件的某個地方留一個占位符，當(dāng)父組件使用這個子組件的時候，可以自定義這個占位符所占地方呈現(xiàn)的樣子，可能是一個標(biāo)題，一個按鈕，甚至一個表格，一個表單。為什么要插槽呢？我們抽離組件的原因就是因為可重復(fù)的代碼太多了，當(dāng)使用可復(fù)用的組件時，大大減少了復(fù)制粘貼。設(shè)想有兩個組件，他們兩個大部分都相同，只有某一個地方不同，這個時候為了這個地方而做別的部分的重復(fù)就完全沒有必要。當(dāng)有了插槽之后，我們可以把這兩個組件的共同部分提取出來，然后把其中不同的那一個部分用一個插槽代替，之后調(diào)用的時候，只去寫這一個部分的代碼就好。這樣就符合了我們組件化的思想，也少了很多工作。

element-table獲取行信息

在中，使用slot-scope，可以獲得當(dāng)前行的信息

<template slot-scope='scope' ></template> scope.$index 獲取索引 scope.row 獲取當(dāng)前行（object）

利用插槽

在表格數(shù)據(jù)中，對于要呈現(xiàn)標(biāo)簽的一個屬性添加tag:true，當(dāng)循環(huán)<el-table-column>的時候，遇到設(shè)置了tag的屬性，就會進(jìn)到這個插槽中，調(diào)用這個組件的父組件就可以自定義標(biāo)簽列要呈現(xiàn)的內(nèi)容

在table組件中

<div class='table-content'> <el-table :data='list' fit stripe empty-text='暫無數(shù)據(jù)' :highlight-current-row='true' > <el-table-column v-for='(item, index) in table_title' :key='index' :prop='item.prop' :label='item.label' : :min- :sortable='item.sortable?item.sortable:false' : :header- > <template slot-scope='scope'><template v-if='item.tag'> <slot name='tags' :scope='scope.row'></slot></template><span v-else>{{scope.row[item.prop]}}</span> </template> </el-table-column> </el-table></div>

怎么循環(huán)<el-table>的內(nèi)容和標(biāo)題就是上面代碼所示

在引用table組件的父組件中

<table-page :list='listData' :table_title='table_title'> <template v-slot:tags='scope'> <el-tag v-if='scope.scope.tag == 1' size='small' type='primary' >tag1 </el-tag> <el-tag v-else-if='scope.scope.tag == 2' size='small' type='warning' >tag2 </el-tag> <el-tag v-else-if='scope.scope.tag == 3' size='small' type='success' >tag3 </el-tag> </template></table-page>

表格使用的數(shù)據(jù)

table_title

[ { prop: ’id’, label: ’編號’, width: ’100’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’date’, label: ’日期’, width: ’150’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’name’, label: ’姓名’, width: ’120’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’province’, label: ’省份’, minwidth: ’120’, titleAlign: ’center’, columnAlign: ’center’, sortable:true, isEdit: true }, { prop: ’city’, label: ’市區(qū)’, minwidth: ’120’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’address’, label: ’地址’, minwidth: ’300’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’auditflag’, label: ’狀態(tài)’, minwidth: ’80px’, tag: true, titleAlign: ’center’, columnAlign: ’center’, sortable:true },];

listData

[ { id: 1, date: ’2016-05-02’, name: ’王小虎’, province: ’上海’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1518 弄’, zip: 200333, tag: '1' }, { id: 2, date: ’2016-05-04’, name: ’王小’, province: ’北京’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1517 弄’, zip: 200333, tag: '2' }, { id: 3, date: ’2016-05-01’, name: ’王小虎’, province: ’上海’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1519 弄’, zip: 200333, tag: '3' }, { id: 4, date: ’2016-05-03’, name: ’王小虎’, province: ’上?！? city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '1' }, { id: 5, date: ’2016-05-03’, name: ’王小虎’, province: ’上海’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '2' }, { id: 6, date: ’2016-05-03’, name: ’王小虎’, province: ’上海’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '3' }, { id: 7, date: ’2016-05-03’, name: ’王小虎’, province: ’上海’, city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '1' }, { id: 8, date: ’2016-05-03’, name: ’王小虎’, province: ’上?！? city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '2' }, { id: 9, date: ’2016-05-03’, name: ’王小虎’, province: ’上?！? city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '3' }, { id: 10, date: ’2016-05-03’, name: ’王小虎’, province: ’上?！? city: ’普陀區(qū)’, address: ’上海市普陀區(qū)金沙江路 1516 弄’, zip: 200333, tag: '1' }],

呈現(xiàn)效果

就是最后一列這樣子啦！

到此這篇關(guān)于vue+element-ui表格封裝tag標(biāo)簽使用插槽的文章就介紹到這了,更多相關(guān)vue element表格封裝tag內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！