vue項目中將element-ui table表格寫成組件

　　表格中咱們常常須要動態加載數據， 若是有多個頁面都須要用到表格， 那我但願能夠有個組件， 只傳數據過去顯示， 不用每一個頁面都去寫這麼一段內容：

 1 <el-table :data="tableData"  border size="mini" fit highlight-current-row height="500">
 2     <el-table-column type="index" align="center" fixed></el-table-column>
 3     <el-table-column prop="DHM" min-width="140px" label="時間" align="center"></el-table-column>
 4     <el-table-column prop="PLAZANO" min-width="100px" label="編碼" align="center"></el-table-column>
 5     <el-table-column prop="PLAZANAME"  min-width="100px" label="名稱" align="center"></el-table-column>
 6     <el-table-column prop="CAR_PLATE" label="號碼" align="center"></el-table-column>
 7     <el-table-column prop="CARD_NO" min-width="120px" label="卡號" align="center"></el-table-column>
 8     <el-table-column prop="DATATYPE" label="數據類型" align="center" :formatter="formatDATATYPE"></el-table-column>
 9     <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
10     <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
11     <el-table-column prop="COMP_CASH" label="計算費額" align="center"></el-table-column>
12     <el-table-column prop="FACT_CASH" label="實收費額" align="center"></el-table-column>
13     <el-table-column label="操做" min-width="140px" align="center">
14        <template slot-scope="scope">
15           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
16           <el-button type="text" size="small">編輯</el-button>
17        </template>
18     </el-table-column>
19 </el-table>

 　　上面這段代碼是一個element-ui中tabele表格的形式，這裏表頭都是已經固定的， 若是每一個頁面都寫上這麼一段， 不一樣的是表頭名字和字段，這樣子就有點重複，並且頁面的篇幅也就比較大了，因而把這塊寫成一個組件， 每一個頁面引入這個組件， 再傳入數據。

　　1.  表格組件：

• 首先  table.vue 組件能夠這樣寫：

 1 <el-table :data="tableData"  border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
 2       v-loading="loading"
 3       element-loading-text="拼命加載中"
 4       element-loading-spinner="el-icon-loading"
 5       element-loading-background="rgba(0, 0, 0, 0.3)">
 6       <el-table-column type="index" align="center" fixed></el-table-column>
 7       <!-- prop: 字段名name, label: 展現的名稱, fixed: 是否須要固定(left, right), minWidth: 設置列的最小寬度(不傳默認值), oper: 是否有操做列
 8            oper.name: 操做列字段名稱, oper.clickFun: 操做列點擊事件, formatData: 格式化內容 -->
 9       <el-table-column v-for="(th, key) in tableHeader"
10         :key="key"
11         :prop="th.prop"
12         :label="th.label"
13         :fixed="th.fixed"
14         :min-width="th.minWidth" align="center">
15           <!-- 加入template主要是有操做一欄， 操做一欄的內容是相同的， 數據不是動態獲取的，不過我這裏操做一欄的名字定死了（oper表示是操做這一列，不然就不是） -->
16           <template slot-scope="scope">
17             <div v-if="th.oper">
18               <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>
19             </div>
20             <div v-else>
21               <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
22               <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
23             </div>
24           </template>
25       </el-table-column>
26 </el-table> 

// 這裏是傳入的數據 

 1　props: {
 2     tableData: {
 3       type: Array,
 4       default: function () {
 5         return []
 6       }
 7     },
 8     rowDblclick: {
 9       type: Function,
10       default: (row, event, column) => { console.log('default: ' + row + '---' + event + '---' + column) }
11     },
12     tableHeader: {
13       type: Array,
14       default: function () {
15         return []
16       }
17     },
18     loading: {
19       type: Boolean,
20       default: false
21     }
22   },

•  而後在其餘組件中就能夠引入table組件， 將數據傳給table顯示

1 <table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></table>

 　  其中 tableData是表格中要顯示的數據內容， 這個內容個人是從後臺查詢出來的， rowDblclick 是雙擊一行作的操做，若是不須要能夠刪除， tableHeader 是表頭顯示的數據， loading 是表格加載的loading方式， 默認是沒有的

　　表頭數據格式以下： formatData 是表格裏面的數據須要作處理的方法， oper是操做列，查看和編輯是兩個按鈕，handleClick和editClick點擊按鈕的方法， 自行補充。

 1 export const tableHeader = [ // 表頭數據
 2   { prop: 'dhm', label: '時間', minWidth: '140px' },
 3   { prop: 'plazano', label: '編碼', minWidth: '100px' }, 4 { prop: 'plazano', label: '名稱', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) }, 5 { prop: 'car_plate', label: '號碼' }, 6 { prop: 'card_no', label: '卡號', minWidth: "120px" }, 7 { prop: 'laneno', label: '數據類型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } }, 8 { prop: 'staffname', label: '姓名', minWidth: '100px' }, 9 { prop: 'mediatype', label: '付款方式' }, 10 { prop: 'comp_cash', label: '計算費額' }, 11 { prop: 'fact_cash', label: '實收費額' }, 12 { prop: 'oper', label: '操做', fixed: 'right', minWidth: '140px', 13  oper: [ 14 { name: '查看', clickFun: handleClick }, 15 { name: '編輯', clickFun: editClick } 16  ] 17  } 18 ]

 　　如今的代碼可能會報錯， 下面這處的代碼是在全局註冊了一個過濾器，若是不註冊就找不到這個方法就會報錯，因此還須要註冊一個全局過濾器，若是你不須要對數據作處理能夠不要這個過濾器

 

　　2.  註冊全局過濾器， 個人是這樣寫的， 先新建個文件 filter.js 而後在裏面寫個方法， export 出去

export function formatters(val, format) {
   if (typeof (format) === 'function') {
     return format(val)
   } else return val
}

　　而後再在main.js中引入進來註冊全局的過濾器：

import * as filters from './filters'
 
Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
})

 

　　這個在每一個頁面就均可以使用 formatters 這個過濾器方法了， 不過具體的過濾方法是由 format 這個參數傳進去的， 這裏主要是由於不一樣的數據過濾的方法不同， 因此在表頭傳數據的時候就一併寫上處理數據的方法

　　若是不少地方都使用了同一個方法， 能夠將這個方法註冊成全局方法， 那麼在每一個頁面就能夠直接使用該方法， 不用重複去寫。

　　3.   註冊全局方法

　　創建個js 文件（個人文件名爲validate.js）， 寫入該方法， 這裏使用 exports.install 註冊全局方法，掛載到vue原型上

exports.install = (Vue, options) => {
  Vue.prototype.validator = {
    lanenoTransf(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' }
  }
}

 　　而後在main.js中引入 

import validator from '@/utils/validate'

Vue.use(validator)

　　最後頁面上就能夠直接使用

{ prop: 'laneno', label: '數據類型', formatData: this.lanenoTransf },

 

 

最最後， 看個人表格：