您好,登錄后才能下訂單哦!
這篇文章主要介紹了element-ui table組件使用render屬性的實(shí)現(xiàn)方法,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
前言
起因:
在使用 element-ui table組件時(shí),由于表列比較多一個(gè)個(gè)寫(xiě)特別麻煩,所以想通過(guò)將所有表頭定義成一個(gè)數(shù)組,通過(guò)遍歷多方式去實(shí)現(xiàn)。這樣解決了手寫(xiě)很多 el-table-column 的情況。
障礙:
類(lèi)似于下面自定義表列的樣式,它是通過(guò) slot-scope 去覆蓋 el-table-column 內(nèi)部slot的樣式實(shí)現(xiàn)的。那我們?cè)诒闅v表頭數(shù)組的時(shí)候如何實(shí)現(xiàn)呢?
參考:
用過(guò) react 開(kāi)發(fā)會(huì)經(jīng)常用到 ant design ,其中它的 table 組件是可以接受 render屬性的,下面使用table組件時(shí),只需要定義好,columns(表頭列) data(表的具體數(shù)據(jù))即可。整體看起來(lái)很簡(jiǎn)潔 去渲染自定義的組件的。 點(diǎn)擊查看 antdesign
demo:
codepen demo地址
const columns = [ { title: 'Name', dataIndex: 'name', render: (text, row, index) => { if (index < 4) { return <a>{text}</a>; } return { children: <a>{text}</a>, props: { colSpan: 5, }, }; }, }] const const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }] ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);
在 Vue 中實(shí)現(xiàn) render 屬性
接下來(lái)我們要實(shí)現(xiàn)下圖的table的樣式,但是這一次我們采用 render 傳參數(shù)的方式
思路
父組件將需要渲染的列表通過(guò) props 傳遞給子組件
子組件使用 slot 并填充默認(rèn)渲染的 el-table-column 方式為 prop 渲染 data 中傳遞的值
子組件通過(guò) slot 將值傳回給父組件,父組件通過(guò) slot-scope 接受到子組件的值,判斷該項(xiàng)是否有 render 屬性,有的話在組件標(biāo)簽添加 render 屬性返回的 html 去覆蓋 slot 中默認(rèn)的值。
子組件定義默認(rèn)值
有了上面的思路,去實(shí)現(xiàn)子組件。我們需要知道一點(diǎn),每個(gè) el-table-column 只是定義了一列的表頭和數(shù)據(jù),而 :data="tableList" 中的每項(xiàng)值是定義了一行的數(shù)據(jù)。所以 el-table-column 是按列來(lái)分,data 是按行來(lái)分
通過(guò)props 去接受表頭列表,數(shù)據(jù)列表
遍歷表頭數(shù)據(jù),并且將 el-table-column 作為默認(rèn)數(shù)據(jù),使用 slot 包裹起來(lái)
通過(guò) slot 想父組件傳遞當(dāng)前項(xiàng)的數(shù)據(jù)
<template> <el-table :data="tableList" > <template v-for="item in propList"> <slot :content="item"> <el-table-column :key="item.id" :prop="item.prop" :label="item.label"></el-table-column> </slot> </template> </el-table> </template> <script> export default { props:{ propList:{ type:Array, default:()=>[] }, tableList:{ type:Array, default:()=>[] }, } } </script>
父組件定義
父組件通過(guò) slot-scope 來(lái)接受到子組件傳遞過(guò)來(lái)的數(shù)據(jù),然后判斷是否有 render 屬性來(lái)確定是否用要去自定義樣式覆蓋默認(rèn)的 slot
首先看傳遞給子組件的表頭數(shù)據(jù),可以看到,第二,三行列表中有一個(gè)render屬性,它是一個(gè)函數(shù)并返回一個(gè) html 的字符串。
tableList就是普通的數(shù)據(jù),也就是數(shù)據(jù)的 key 值去渲染對(duì)應(yīng)的數(shù)據(jù)
圖片這列舉例子,當(dāng)父組件通過(guò) props 將 {label,prop,id,render} 傳遞給子組件后,子組件有通過(guò) slot 將值傳遞回父組件。
到這里有些人會(huì)有疑問(wèn),為什么要將數(shù)據(jù)這樣傳來(lái)傳去,因?yàn)槲覀冊(cè)谧咏M件中定義好了默認(rèn)樣式,而父組件中需要判斷該值是否需要自定義樣式,去覆蓋子組件中的樣式。
這些自定義樣式就是一開(kāi)始,在render函數(shù)中返回的 html 字符串
為啥 React 直接返回 jsx ,而Vue需要返回 html 字符串,因?yàn)閞eact本身就是使用 JSX 來(lái)渲染模版的,最終都會(huì)通過(guò) babel 編譯成 React.createElement ,而Vue是通過(guò) template 來(lái)渲染模版的,這里通過(guò)定義 template 模版字符串,最終通過(guò) v-html 來(lái)解析
為什么這里有兩個(gè) slot-scope ,第一個(gè)是 slot-item 的,組件內(nèi)部通過(guò) slot-scope 將值傳遞出來(lái)。而第二個(gè)是 el-table-item 的,ui組件內(nèi)部同樣將數(shù)據(jù)通過(guò) slot-scope 傳遞傳來(lái)。
通過(guò)第一個(gè) slot-scope 拿到 propList 中的定義的 render 函數(shù),通過(guò)第二個(gè) slot-scope 拿到 table 組件內(nèi)部傳遞出來(lái)的數(shù)據(jù),將數(shù)據(jù)傳遞給 render 函數(shù)去生成自定義模版
最終通過(guò) v-html 去解析生成的字符串模版
<slot-item :propList="propList" :tableList="tableList"> <template slot-scope="{content}" v-if="content.render"> <el-table-column :label="content.label"> <template slot-scope="{$index,row}"> <div v-html="content.render(row)"></div> </template> </el-table-column> </template> </slot-item> export default { components:{ SlotItem }, data () { return { propList:[ {label:'姓名',prop:'name',id:1}, {label:'圖片',prop:'pic',id:2,render:({pic})=>{ return `<img src='${pic}' />` }}, {label:'操作',prop:'operate',id:3,render:({text})=>{ return `<div >${text}</div>` }}, ], tableList:[ {name:'章三',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png',text:'新增'}, {name:'里斯',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png',text:'刪除'}, {name:'網(wǎng)舞',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png',text:'跳轉(zhuǎn)'}, ] } } } </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“element-ui table組件使用render屬性的實(shí)現(xiàn)方法”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。