寫在前面

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

大背景

在開發一些系統過程中，使用table作數據展示在所難免。先來看看el-table組件。

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

數據驅動

<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> 復制代碼data () {return {columnsConfig: [{prop: 'logicCategoryId',label: '編號（ID）'}, {prop: 'name',label: '分類名稱'}]} } 復制代碼

這樣可以很輕松的渲染出來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> 復制代碼

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

使用slots怎么辦

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

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

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

首先，看看columnsConfig怎么寫

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: '分類名稱' }], 復制代碼

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

<script> import { TableColumn } from 'element-ui' // renderCell 函數，類型可擴展 const renderCell = {slots: function (h, data) {// 接受傳入的renderCell函數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 先調用在調用本身的created () {if (renderCell[this.cellType]) {this.columnConfig.renderCell = renderCell[this.cellType].bind(this)}} } </script>復制代碼

最后，組件用通過模板，配置數據即可

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

配置數據

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: '分類名稱' }]**** 復制代碼

寫在后面

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

• extends單繼承，同時使用優先級高
• mixins多繼承，同時使用優先級低

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

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

補充

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

評論區 @hold 評論更iview如出一轍，后來去翻看iview的文檔確實，一直都沒用iview開發過，不知道table也是用render來實現的，確實分享之后自己學到了更多，感謝@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')]); } 復制代碼

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

那如果想使用filter怎么辦?

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

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

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

不使用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> 復制代碼

使用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'}]} } 復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。