寫在前面

感謝 餓了么前端團隊提供組件化框架elememt-ui，本文基礎(chǔ)組件使用element-ui。

大背景

在開發(fā)一些系統(tǒng)過程中，使用table作數(shù)據(jù)展示在所難免。先來看看el-table組件。

非常簡單易用的組件，根據(jù)提供的data數(shù)據(jù)，配置table每一列的數(shù)據(jù)和label。沒錯，這樣似乎都是ok的，但是在開發(fā)大量包含table的頁面，會發(fā)現(xiàn)每次都需要去復(fù)制el-table-column，或者你會說你已經(jīng)很屬性element-ui整套框架的文檔。然而，重復(fù)的代碼很多及代碼量很大。作為一名程序員，某一天需要寫自己已經(jīng)寫過的某段代碼，是不是感覺有點不應(yīng)該呢。。。

數(shù)據(jù)驅(qū)動

<el-table:data="tabledata"><el-table-columnv-for="(item,key) in columnsConfig":key="key":label="item.label":prop="item.prop"></el-table-column> </el-table> 復(fù)制代碼data () {return {columnsConfig: [{prop: 'logicCategoryId',label: '編號（ID）'}, {prop: 'name',label: '分類名稱'}]} } 復(fù)制代碼

這樣可以很輕松的渲染出來table。

這里有個小技巧

el-table-column改造下

<el-table:data="tabledata"><el-table-columnv-for="(item,key) in columnsConfig":key="key"v-bind="item">// 這里改造</el-table-column> </el-table> 復(fù)制代碼

v-bind可以綁定一個對象，這樣會讀取item對象的每個屬性，使用到組件當(dāng)中去。比如增加width: 100，只需要在columnsConfig沒一項增加width即可，el-table-column不需要改動。

使用slots怎么辦

<el-table-columnlabel="日期"width="120"><template scope="scope">{{ scope.row.date }}</template> </el-table-column> 復(fù)制代碼

很明顯，el-table-column的slots配置在columnsConfig數(shù)組不能用。 在源碼找到解決辦法（文件路徑：node_modules_element-ui@1.3.7@element-ui\packages\table\src\table-column.js），create鉤子函數(shù)代碼如下：

在this.columnConfig.renderCell函數(shù)渲染每一個table cell，如果使用slots會讀取，slots中的內(nèi)容。 編寫一個新組件使用vue extends，繼承el-table-columns，重寫了renderCell函數(shù)改變其返回內(nèi)容，這時候用jsx將內(nèi)容用return slots的函數(shù)傳回來。

首先，看看columnsConfig怎么寫

columnsConfig: [{cellType: 'slots',// 不是所有的列都需要重寫，加個字段標(biāo)記下prop: 'logicCategoryId',label: '編號（ID）',renderCell: (scope) => {return (<el-button type="text" on-click={() => that.viewGoods(scope.row)}>{ scope.row.productCount }</el-button>)} }, {prop: 'name',label: '分類名稱' }], 復(fù)制代碼

其次，開發(fā)新組件 column-plus.vue，代碼如下

<script> import { TableColumn } from 'element-ui' // renderCell 函數(shù)，類型可擴展 const renderCell = {slots: function (h, data) {// 接受傳入的renderCell函數(shù)let renderCell = () => {return this.renderCell ? this.renderCell(data) : ''}return <div class="cell">{ renderCell(h, data) }</div>} } export default {extends: TableColumn,// 繼承el-table-columnprops: {prop: {type: [String, Number]},cellType: {type: String,validator: function (value) {let valid = ['text', 'input', 'slots'].includes(value)!valid && console.error(`columnPlus組件不適配 ${value} 類型`)return valid}},renderCell: {type: Function}},// el-table-column 先調(diào)用在調(diào)用本身的created () {if (renderCell[this.cellType]) {this.columnConfig.renderCell = renderCell[this.cellType].bind(this)}} } </script>復(fù)制代碼

最后，組件用通過模板，配置數(shù)據(jù)即可

<el-table:data="tabledata"><column-plus v-bind="item" v-for="(item,key) in columnConfigs" :key="key"></column-plus> </el-table> 復(fù)制代碼

配置數(shù)據(jù)

columnsConfig: [{cellType: 'slots',prop: 'logicCategoryId',label: '編號（ID）',renderCell: (scope) => {return (<el-button type="text" on-click={() => that.viewGoods(scope.row)}>{ scope.row.productCount }</el-button>)} }, {prop: 'name',label: '分類名稱' }]**** 復(fù)制代碼

寫在后面

組件開發(fā)實現(xiàn)可配置開發(fā)，可達到快速開發(fā)的目的和簡化代碼。 需要說明vue extends和mixins屬性，這兩個屬性都是繼承，屬性和方法重寫，鉤子函數(shù)是先調(diào)用父類在調(diào)用自己的，上面的例子（el-table-column 先調(diào)用在調(diào)用本身的），但是區(qū)別是：

• extends單繼承，同時使用優(yōu)先級高
• mixins多繼承，同時使用優(yōu)先級低

另外，vue-cli使用jsx編寫需要安裝三個插件。

• babel-helper-vue-jsx-merge-props
• babel-plugin-syntax-jsx
• babel-plugin-transform-vue-jsx

補充

發(fā)布了一天沒想到有這么小伙伴閱讀，有幾點需要補充下。

評論區(qū) @hold 評論更iview如出一轍，后來去翻看iview的文檔確實，一直都沒用iview開發(fā)過，不知道table也是用render來實現(xiàn)的，確實分享之后自己學(xué)到了更多，感謝@hold。

這是iview，table組件的代碼

render: (h, params) => {return h('div', [h('Button', {props: {type: 'text',size: 'small'}}, 'View'),h('Button', {props: {type: 'text',size: 'small'}}, 'Edit')]); } 復(fù)制代碼

當(dāng)然使用render之后，需要使用filter，就比較尷尬了。不過，vue的filter其實也是語法糖，最終編譯是編譯成函數(shù)處理。

那如果想使用filter怎么辦?

data () {return {columns: [{renderCell: (scope) => {return ({ that.stateTxt(scope.row.state)})}}]}},methods: {stateTxt (val) {}} 復(fù)制代碼

寫過react都知道是這么干的。

所以，一直以來前端把js寫在html中，還是把html寫js中，都是爭論不休的話題，如何選擇還開發(fā)自己拿捏。

不使用render代碼是這樣的

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template> 復(fù)制代碼

使用render處理是這樣的

<el-table:data="tabledata"><column-plus v-bind="item" v-for="(item,key) in columnConfigs" :key="key"></column-plus> </el-table>data () {return {columnConfigs: [{label: '日期',width: '180',prop: 'date'}, {label: '姓名',width: '180',prop: 'name'}, {label: '地址',prop: 'address'}]} } 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的基于element-ui实现table可配置化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。