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

插槽

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

element-table獲取行信息

在中，使用slot-scope，可以獲得當前行的信息

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

利用插槽

在表格數據中，對于要呈現標簽的一個屬性添加tag:true，當循環<el-table-column>的時候，遇到設置了tag的屬性，就會進到這個插槽中，調用這個組件的父組件就可以自定義標簽列要呈現的內容

在table組件中

<div class='table-content'> <el-table :data='list' fit stripe empty-text='暫無數據' :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>

怎么循環<el-table>的內容和標題就是上面代碼所示

在引用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>

表格使用的數據

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: ’市區’, minwidth: ’120’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’address’, label: ’地址’, minwidth: ’300’, titleAlign: ’center’, columnAlign: ’center’, sortable:true }, { prop: ’auditflag’, label: ’狀態’, minwidth: ’80px’, tag: true, titleAlign: ’center’, columnAlign: ’center’, sortable:true },];

listData

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

呈現效果

就是最后一列這樣子啦！

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