vue項(xiàng)目中將element-ui table表格寫(xiě)成組件的實(shí)現(xiàn)代碼

更新時(shí)間：2019年06月12日 11:19:40 作者：sosoqi

這篇文章主要介紹了vue項(xiàng)目中將element-ui table表格寫(xiě)成組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

表格中我們經(jīng)常需要?jiǎng)討B(tài)加載數(shù)據(jù)，如果有多個(gè)頁(yè)面都需要用到表格，那我希望可以有個(gè)組件，只傳數(shù)據(jù)過(guò)去顯示，不用每個(gè)頁(yè)面都去寫(xiě)這么一段內(nèi)容：

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
  <el-table-column type="index" align="center" fixed></el-table-column>
  <el-table-column prop="DHM" min-width="140px" label="時(shí)間" align="center"></el-table-column>
  <el-table-column prop="PLAZANO" min-width="100px" label="編碼" align="center"></el-table-column>
  <el-table-column prop="PLAZANAME" min-width="100px" label="名稱(chēng)" align="center"></el-table-column>
  <el-table-column prop="CAR_PLATE" label="號(hào)碼" align="center"></el-table-column>
  <el-table-column prop="CARD_NO" min-width="120px" label="卡號(hào)" align="center"></el-table-column>
  <el-table-column prop="DATATYPE" label="數(shù)據(jù)類(lèi)型" align="center" :formatter="formatDATATYPE"></el-table-column>
  <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
  <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
  <el-table-column prop="COMP_CASH" label="計(jì)算費(fèi)額" align="center"></el-table-column>
  <el-table-column prop="FACT_CASH" label="實(shí)收費(fèi)額" align="center"></el-table-column>
  <el-table-column label="操作" min-width="140px" align="center">
    <template slot-scope="scope">
     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
     <el-button type="text" size="small">編輯</el-button>
    </template>
  </el-table-column>
</el-table>

　上面這段代碼是一個(gè)element-ui中tabele表格的形式，這里表頭都是已經(jīng)固定的，如果每個(gè)頁(yè)面都寫(xiě)上這么一段，不同的是表頭名字和字段，這樣子就有點(diǎn)重復(fù)，而且頁(yè)面的篇幅也就比較大了，于是把這塊寫(xiě)成一個(gè)組件，每個(gè)頁(yè)面引入這個(gè)組件，再傳入數(shù)據(jù)。

　　1. 表格組件：

•首先 table.vue 組件可以這樣寫(xiě)：

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
   v-loading="loading"
   element-loading-text="拼命加載中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.3)">
   <el-table-column type="index" align="center" fixed></el-table-column>
   <!-- prop: 字段名name, label: 展示的名稱(chēng), fixed: 是否需要固定(left, right), minWidth: 設(shè)置列的最小寬度(不傳默認(rèn)值), oper: 是否有操作列
      oper.name: 操作列字段名稱(chēng), oper.clickFun: 操作列點(diǎn)擊事件, formatData: 格式化內(nèi)容 -->
   <el-table-column v-for="(th, key) in tableHeader"
    :key="key"
    :prop="th.prop"
    :label="th.label"
    :fixed="th.fixed"
    :min-width="th.minWidth" align="center">
     <!-- 加入template主要是有操作一欄， 操作一欄的內(nèi)容是相同的， 數(shù)據(jù)不是動(dòng)態(tài)獲取的，不過(guò)我這里操作一欄的名字定死了（oper表示是操作這一列，否則就不是） -->
     <template slot-scope="scope">
      <div v-if="th.oper">
       <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>
      </div>
      <div v-else>
       <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
       <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
      </div>
     </template>
   </el-table-column>
</el-table>

// 這里是傳入的數(shù)據(jù) 
props: {
  tableData: {
   type: Array,
   default: function () {
    return []
   }
  },
  rowDblclick: {
   type: Function,
   default: (row, event, column) => { console.log('default: ' + row + '---' + event + '---' + column) }
  },
  tableHeader: {
   type: Array,
   default: function () {
    return []
   }
  },
  loading: {
   type: Boolean,
   default: false
  }
 },

• 然后在其他組件中就可以引入table組件，將數(shù)據(jù)傳給table顯示

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

　其中 tableData是表格中要顯示的數(shù)據(jù)內(nèi)容，這個(gè)內(nèi)容我的是從后臺(tái)查詢(xún)出來(lái)的， rowDblclick 是雙擊一行做的操作，如果不需要可以刪除， tableHeader 是表頭顯示的數(shù)據(jù)， loading 是表格加載的loading方式，默認(rèn)是沒(méi)有的

　　表頭數(shù)據(jù)格式如下： formatData 是表格里面的數(shù)據(jù)需要做處理的方法， oper是操作列，查看和編輯是兩個(gè)按鈕，handleClick和editClick點(diǎn)擊按鈕的方法，自行補(bǔ)充。

export const tableHeader = [ // 表頭數(shù)據(jù)
 { prop: 'dhm', label: '時(shí)間', minWidth: '140px' },
 { prop: 'plazano', label: '編碼', minWidth: '100px' },
 { prop: 'plazano', label: '名稱(chēng)', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) },
 { prop: 'car_plate', label: '號(hào)碼' },
 { prop: 'card_no', label: '卡號(hào)', minWidth: "120px" },
 { prop: 'laneno', label: '數(shù)據(jù)類(lèi)型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } },
 { prop: 'staffname', label: '姓名', minWidth: '100px' },
 { prop: 'mediatype', label: '付款方式' },
 { prop: 'comp_cash', label: '計(jì)算費(fèi)額' },
 { prop: 'fact_cash', label: '實(shí)收費(fèi)額' },
 { prop: 'oper', label: '操作', fixed: 'right', minWidth: '140px',
  oper: [
   { name: '查看', clickFun: handleClick },
   { name: '編輯', clickFun: editClick }
  ]
 }
]

現(xiàn)在的代碼可能會(huì)報(bào)錯(cuò)，下面這處的代碼是在全局注冊(cè)了一個(gè)過(guò)濾器，如果不注冊(cè)就找不到這個(gè)方法就會(huì)報(bào)錯(cuò)，所以還需要注冊(cè)一個(gè)全局過(guò)濾器，如果你不需要對(duì)數(shù)據(jù)做處理可以不要這個(gè)過(guò)濾器

　　2. 注冊(cè)全局過(guò)濾器，我的是這樣寫(xiě)的，先新建個(gè)文件 filter.js 然后在里面寫(xiě)個(gè)方法， export 出去

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

　　然后再在main.js中引入進(jìn)來(lái)注冊(cè)全局的過(guò)濾器：

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

　　這個(gè)在每個(gè)頁(yè)面就都可以使用 formatters 這個(gè)過(guò)濾器方法了，不過(guò)具體的過(guò)濾方法是由 format 這個(gè)參數(shù)傳進(jìn)去的，這里主要是因?yàn)椴煌臄?shù)據(jù)過(guò)濾的方法不一樣，所以在表頭傳數(shù)據(jù)的時(shí)候就一并寫(xiě)上處理數(shù)據(jù)的方法

　　如果很多地方都使用了同一個(gè)方法，可以將這個(gè)方法注冊(cè)成全局方法，那么在每個(gè)頁(yè)面就可以直接使用該方法，不用重復(fù)去寫(xiě)。

　　3. 注冊(cè)全局方法

　　建立個(gè)js 文件（我的文件名為validate.js），寫(xiě)入該方法，這里使用 exports.install 注冊(cè)全局方法，掛載到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)

　　最后頁(yè)面上就可以直接使用

{ prop: 'laneno', label: '數(shù)據(jù)類(lèi)型', formatData: this.lanenoTransf },

最最后，看我的表格：

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中將element-ui table表格寫(xiě)成組件的實(shí)現(xiàn)代碼 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: