您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用element怎么對(duì)el-table表格進(jìn)行二次封裝,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
這里直接引用官方的基礎(chǔ)使用模板,直接抄過(guò)來(lái)(?ω?),下面代碼中主要是抽離html部分,可以看出每個(gè)el-table-column中都含有prop、label、width屬性,只不過(guò)這些屬性值不太一樣罷了,其余的部分都差不多一樣,所以表頭(表格每列el-table-column的定義)這里可以封裝一下,把不同的地方封裝成一個(gè)數(shù)組對(duì)象結(jié)構(gòu),然后通過(guò)for循環(huán)來(lái)完成html中的部分。
封裝前
<template> <el-table :data="tableData" > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1516 弄' }] } } } </script>
表格の樣子
封裝后
<template> <el-table :data="tableData" > <template v-for="(item, key) in header"> <el-table-column :key="key" :prop="itm.prop ? itm.prop : null" :label="itm.label ? itm.label : null" :width="itm.width ? itm.width : null" > </el-table-column> </template> </el-table> </template> <script> export default { data() { return { header: [ { prop: "date", label: "日期", width: "180" }, { prop: "name", label: "姓名", width: "180" }, { prop: "address", label: "地址" } ], tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀區(qū)金沙江路 1516 弄" } ] }; } }; </script>
現(xiàn)在數(shù)據(jù)還比較少,可能看不出封裝組件封裝的優(yōu)勢(shì),但是相對(duì)于之前代碼,這里邏輯上看起來(lái)更加清晰,而且修改列的時(shí)候直接改動(dòng)data中的header數(shù)據(jù)即可,不用再去html代碼中去“開(kāi)刀”( ̄▽?zhuān)?/。上面是最最最簡(jiǎn)單的封裝了,嚴(yán)格來(lái)說(shuō)只是簡(jiǎn)單的抽離了一下代碼中的數(shù)據(jù)結(jié)構(gòu),在正常的業(yè)務(wù)中肯定不止這么簡(jiǎn)單的封裝,接下來(lái)才是重點(diǎn)─━ _ ─━?
在真正的開(kāi)發(fā)過(guò)程中,表格不僅僅要展示數(shù)據(jù),還要完成一些額外的任務(wù),比如CRUD(增刪改查操作)和數(shù)據(jù)格式轉(zhuǎn)化,表格內(nèi)每一條數(shù)據(jù)都有可能被單獨(dú)修改或者執(zhí)行一些功能性的交互,這時(shí)候就要在單元格內(nèi)內(nèi)嵌一些按鈕、輸入框、標(biāo)簽等等的代碼,element官方給出的方法是使用插槽slot,獲取對(duì)應(yīng)行的數(shù)據(jù)使用slot-scope,在對(duì)應(yīng)的列中設(shè)置相應(yīng)的代碼,但是這里給我們二次封裝就會(huì)帶來(lái)不小的問(wèn)題,如果只是單純的修改數(shù)據(jù)的格式使用官方提供的formatter屬性還可以實(shí)現(xiàn),但是要內(nèi)嵌代碼就會(huì)比較麻煩,內(nèi)嵌代碼必然就會(huì)帶來(lái)封裝上的困難,這也是我在封裝代碼的時(shí)候遇到的最大的阻礙,如果要想封裝好這個(gè)表格,就必須將這部分代碼抽離出組件外,在查詢閱讀了大量博客之后(其實(shí)是我菜了,學(xué)藝不精(T▽?zhuān)?),我終于找到了將內(nèi)嵌代碼剝離出組件的方法ヾ(????)?",那就是render函數(shù),關(guān)于render可以參考一下這篇博客,使用render函數(shù)就可以輕而易舉的將這部分邏輯代碼抽離出來(lái)了。
el-table真正の二次封裝
二次封裝源代碼
<template> <el-table empty-text="暫無(wú)數(shù)據(jù)" ref="table" :data="tableList" border stripe fit highlight-current-row :height="inTableHeight" @selection-change="selectionChange" @row-click="rowClick" > <!-- 選擇框 --> <el-table-column v-if="select" type="selection" fixed="left" width="55" align="center" /> <template v-for="(itm, idx) in header"> <!-- 特殊處理列 --> <el-table-column v-if="itm.render" :key="idx" :prop="itm.prop ? itm.prop : null" :label="itm.label ? itm.label : null" :width="itm.width ? itm.width : null" :sortable="itm.sortable ? itm.sortable : false" :align="itm.align ? itm.align : 'center'" :fixed="itm.fixed ? itm.fixed : null" :show-overflow-tooltip="itm.tooltip" min-width="50" > <template slot-scope="scope"> <ex-slot :render="itm.render" :row="scope.row" :index="scope.$index" :column="itm" /> </template> </el-table-column> <!-- 正常列 --> <el-table-column v-else :key="idx" :prop="itm.prop ? itm.prop : null" :label="itm.label ? itm.label : null" :width="itm.width ? itm.width : null" :sortable="itm.sortable ? itm.sortable : false" :align="itm.align ? itm.align : 'center'" :fixed="itm.fixed ? itm.fixed : null" :formatter="itm.formatter" :show-overflow-tooltip="itm.tooltip" min-width="50" /> </template> </el-table> </template> <script> // 自定義內(nèi)容的組件 var exSlot = { functional: true, props: { row: Object, render: Function, index: Number, column: { type: Object, default: null } }, render: (h, context) => { const params = { row: context.props.row, index: context.props.index }; if (context.props.column) params.column = context.props.column; return context.props.render(h, params); } }; export default { components: { exSlot }, props: { tableList: { type: Array, default: () => [] }, header: { type: Array, default: () => [] }, select: { type: Boolean, default: () => false }, height: { type: [Number, String, Function], default: () => null } }, data() { return { inTableHeight: null }; }, created() { //該階段可以接收父組件的傳遞參數(shù) this.inTableHeight = this.height; }, mounted() { this.$nextTick(() => { //表格高度自適應(yīng)瀏覽器大小 this.changeTableHight(); if (!this.height) { window.onresize = () => { this.changeTableHight(); }; } }); }, destroyed() { //高度自適應(yīng)事件注銷(xiāo) window.onresize = null; }, watch: { /** * 數(shù)據(jù)變化后 高度自適應(yīng) */ tableList() { this.$nextTick(() => { this.changeTableHight(); }); } }, methods: { /** * 選擇框選擇后更改,事件分發(fā) */ selectionChange(selection) { this.$emit("selection-change", selection); }, /** * 點(diǎn)擊事件 */ rowClick(row, column, event) { this.$emit("row-click", row, column, event); }, /** * 高度自適應(yīng) * 當(dāng)表格展示空間小于460按460px展示,大于的時(shí)候高度填充 */ changeTableHight() { if (this.height) { //如果有傳進(jìn)來(lái)高度就取消自適應(yīng) this.inTableHeight = this.height; this.$refs.table.doLayout(); return; } let tableHeight = window.innerHeight || document.body.clientHeight; //高度設(shè)置 let disTop = this.$refs.table.$el; //如果表格上方有元素則減去這些高度適應(yīng)窗口,66是底下留白部分 tableHeight -= disTop.offsetTop + 66; if (disTop.offsetParent) tableHeight -= disTop.offsetParent.offsetTop; this.inTableHeight = tableHeight < 460 ? 460 : tableHeight; //重繪表格 this.$refs.table.doLayout(); } } }; </script> <style></style>
封裝代碼的相關(guān)解釋
以上就是我封裝的代碼,部分屬性或者方法由于沒(méi)有使用到所以我就沒(méi)有將對(duì)應(yīng)的方法和屬性封裝進(jìn)去,如果你們開(kāi)發(fā)中有用到對(duì)應(yīng)的地方其實(shí)可以照貓畫(huà)虎的填上去即可,我封裝表格的時(shí)候在屬性這里使用了三目運(yùn)算符,用于做一些兼容,如果不傳對(duì)應(yīng)的屬性就給個(gè)默認(rèn)值,比如align屬性,我設(shè)置的是默認(rèn)居中。還有就是方法,在表格的方法引用方面,其實(shí)就是把官方的方法用$emit事件將對(duì)應(yīng)的參數(shù)和方法名用同樣的方法分發(fā)給父組件,這樣父組件使用完全可以參照element官方文檔使用這些方法,在組件內(nèi)我只是進(jìn)行了一次轉(zhuǎn)發(fā)而已,我自己寫(xiě)的時(shí)候并沒(méi)有用到太多的方法,所以只封裝了一兩個(gè),如果有需要可以自行添加。除了上述兩個(gè)封裝,有一個(gè)特別的地方就是勾選框,不能放在循環(huán)內(nèi),不然會(huì)出現(xiàn)錯(cuò)誤,可能是索引的問(wèn)題吧,所以我單獨(dú)使用一個(gè)參數(shù)來(lái)控制是否顯示選擇框。另外就是,在公司產(chǎn)品要求表格能夠自適應(yīng)頁(yè)面的高度,這個(gè)功能我也是修改了好久,460是最小的高度,關(guān)于高度自適應(yīng)的全部在changeTableHight()方法中,如果不需要這個(gè)功能,將函數(shù)和所有引用該函數(shù)的地方刪除即可。
height:如果不傳入這個(gè)屬性,那么表格高度就如上面所說(shuō)的是自適應(yīng)高度,可以通過(guò)這個(gè)屬性來(lái)指定表格的高度。
formatter:這個(gè)屬性在列中如果使用插槽就會(huì)失效,所以我設(shè)置了兩個(gè)列,如果有render方法說(shuō)明單元格要內(nèi)嵌代碼,就是用特殊列,反之就是正常列,所以formatter和render不能同時(shí)使用。
render:終于到了最關(guān)鍵的地方了( ̄▽?zhuān)?/,這個(gè)可是我封裝表格的最大難點(diǎn)了,render對(duì)我個(gè)人理解而言就是虛擬結(jié)點(diǎn),在DOM和CSSOM樹(shù)合并為render樹(shù)的階段,對(duì)代碼進(jìn)行修改。
以上就是我封裝表格的詳細(xì)解釋了,可能有遺漏的部分,畢竟封裝這個(gè)表格也讓我學(xué)了不少東西,所以之前有些地方可能解釋不清楚或者不到位,還望各位大佬指正。
封裝這么久的組件,當(dāng)然要使用起來(lái)才知道的到底好不好用,關(guān)于引用方面,首先要在引用的地方進(jìn)行組件注冊(cè),如果全局注冊(cè)過(guò)了,可以忽略在局部注冊(cè),關(guān)于組件的注冊(cè)這里就不做詳解了(o?▽?)o 。我使用了全局注冊(cè),所以這里是直接引入我自己封裝好的組件。
<template> <div class="hello"> <xd-table :table-list="tableData" :header="header" height="300"></xd-table> </div> </template> <script> export default { name: "HelloWorld", data() { return { header: [ { prop: "w", label: "w" }, { prop: "x", label: "x", formatter: (row) => { return row.x.toFixed(3); }, }, { prop: "d", label: "d", formatter: (row) => { return row.d.toFixed(2); }, }, { label: "操作", render: (h, data) => { return ( <el-button type="primary" onClick={() => { this.handleClick(data.row); }} > 點(diǎn)我獲取行數(shù)據(jù) </el-button> ); }, }, ], tableData: [ { w: 1, x: 99.25123, d: 0.23892 }, { w: 1, x: 255.6666, d: 0.99134 }, ], }; }, methods: { handleClick(row) { console.log(row); }, }, }; </script>
引用組件之前一定要記得先注冊(cè),這里我只使用了幾個(gè)屬性,其他屬性沒(méi)有使用,因?yàn)槭莇emo,主要還是展示render內(nèi)嵌代碼的方法,還有一個(gè)就是官方formatter方法的使用。
有一個(gè)需要注意點(diǎn)就是render內(nèi)我使用了JSX模板語(yǔ)法這里需要在VUE項(xiàng)目中單獨(dú)去配置一下JSX語(yǔ)法,如果不想使用JSX,直接寫(xiě)也可以,因?yàn)椴皇褂肑SX語(yǔ)法寫(xiě)出來(lái)的內(nèi)嵌模板代碼比較難讀所以我就不展示了,個(gè)人建議還是使用JSX語(yǔ)法,雖然和原生vue有些地方使用方法不太一樣。
關(guān)于使用element怎么對(duì)el-table表格進(jìn)行二次封裝就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(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)容。