vue+element-ui表格封裝tag標(biāo)簽使用插槽
我們知道有很多系統(tǒng)都要求表格中添加各種各樣的tag，來(lái)標(biāo)記一些屬性。在element-ui中添加tag很簡(jiǎn)單，最重要的就是用到了vue的插槽slot這個(gè)特性。首先了解什么是插槽。
插槽
省去官方的復(fù)雜講解和代碼，插槽的意思簡(jiǎn)單來(lái)說(shuō)，就是在子組件的某個(gè)地方留一個(gè)占位符，當(dāng)父組件使用這個(gè)子組件的時(shí)候，可以自定義這個(gè)占位符所占地方呈現(xiàn)的樣子，可能是一個(gè)標(biāo)題，一個(gè)按鈕，甚至一個(gè)表格，一個(gè)表單。
為什么要插槽呢？我們抽離組件的原因就是因?yàn)榭芍貜?fù)的代碼太多了，當(dāng)使用可復(fù)用的組件時(shí)，大大減少了復(fù)制粘貼。設(shè)想有兩個(gè)組件，他們兩個(gè)大部分都相同，只有某一個(gè)地方不同，這個(gè)時(shí)候?yàn)榱诉@個(gè)地方而做別的部分的重復(fù)就完全沒有必要。當(dāng)有了插槽之后，我們可以把這兩個(gè)組件的共同部分提取出來(lái)，然后把其中不同的那一個(gè)部分用一個(gè)插槽代替，之后調(diào)用的時(shí)候，只去寫這一個(gè)部分的代碼就好。這樣就符合了我們組件化的思想，也少了很多工作。
element-table獲取行信息
在中，使用slot-scope，可以獲得當(dāng)前行的信息
<template slot-scope="scope" ></template>
- scope.$index 獲取索引
- scope.row 獲取當(dāng)前行（object）
利用插槽
在表格數(shù)據(jù)中，對(duì)于要呈現(xiàn)標(biāo)簽的一個(gè)屬性添加tag:true，當(dāng)循環(huán)<el-table-column>的時(shí)候，遇到設(shè)置了tag的屬性，就會(huì)進(jìn)到這個(gè)插槽中，調(diào)用這個(gè)組件的父組件就可以自定義標(biāo)簽列要呈現(xiàn)的內(nèi)容
在table組件中
<div class="table-content">
<el-table
:data="list"
class="mt-10"
fit
stripe
empty-text="暫無(wú)數(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: '編號(hào)',
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
visible前面加冒號(hào)的，說(shuō)明后面是一個(gè)變量或者表達(dá)式；沒加冒號(hào)的后面就是對(duì)應(yīng)的字符串字面量，這篇文章主要介紹了vue-cli中的:visible.sync是什么,需要的朋友可以參考下2022-11-11
父組件傳遞給子組件的數(shù)據(jù),如果是一個(gè)復(fù)雜對(duì)象（例如一個(gè)數(shù)組或?qū)ο螅?那么子組件只會(huì)監(jiān)聽對(duì)象的引用而不是對(duì)象的內(nèi)容,這意味著當(dāng)對(duì)象的內(nèi)容發(fā)生變化時(shí),子組件不會(huì)更新,本文給大家介紹了vue子組件不刷新的三種解決方案,需要的朋友可以參考下2024-03-03
Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化
這篇文章主要介紹了Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析(面向新手)
這篇文章主要介紹了vue實(shí)現(xiàn)登錄頁(yè)面的驗(yàn)證碼以及驗(yàn)證過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
nginx+vite項(xiàng)目打包以及部署的詳細(xì)過(guò)程
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于nginx+vite項(xiàng)目打包以及部署的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中的baseurl如何配置問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁(yè)面,使用?iframe?技術(shù)可以實(shí)現(xiàn)多個(gè)頁(yè)面之間的數(shù)據(jù)傳遞和交互，提高了網(wǎng)站的整體性能和用戶體驗(yàn)，需要的朋友可以參考下2023-05-05
本篇文章主要介紹了vue2.0父子組件間通信的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04