vue+element-ui表格封裝tag標(biāo)簽使用插槽
我們知道有很多系統(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的屬性,就會進到這個插槽中,調(diào)用這個組件的父組件就可以自定義標(biāo)簽列要呈現(xiàn)的內(nèi)容
在table組件中
<div class="table-content"> <el-table :data="list" class="mt-10" 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" :width="item.width?item.width:null" :min-width="item.minwidth?item.minwidth:null" :sortable="item.sortable?item.sortable:false" :align="item.columnAlign" :header-align="item.titleAlign" > <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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element-ui 限制日期選擇的方法(datepicker)
本篇文章主要介紹了element-ui 限制日期選擇的方法(datepicker),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05