vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼
更新時間：2019年06月12日 11:19:40 作者：sosoqi
這篇文章主要介紹了vue項目中將element-ui table表格寫成組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
表格中我們經常需要動態(tài)加載數(shù)據， 如果有多個頁面都需要用到表格， 那我希望可以有個組件， 只傳數(shù)據過去顯示， 不用每個頁面都去寫這么一段內容：
<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="時間" 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="名稱" align="center"></el-table-column>
<el-table-column prop="CAR_PLATE" label="號碼" align="center"></el-table-column>
<el-table-column prop="CARD_NO" min-width="120px" label="卡號" align="center"></el-table-column>
<el-table-column prop="DATATYPE" label="數(shù)據類型" 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="計算費額" align="center"></el-table-column>
<el-table-column prop="FACT_CASH" label="實收費額" 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>
上面這段代碼是一個element-ui中tabele表格的形式，這里表頭都是已經固定的， 如果每個頁面都寫上這么一段， 不同的是表頭名字和字段，這樣子就有點重復，而且頁面的篇幅也就比較大了，于是把這塊寫成一個組件， 每個頁面引入這個組件， 再傳入數(shù)據。
1. 表格組件：
•首先 table.vue 組件可以這樣寫：
<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: 展示的名稱, fixed: 是否需要固定(left, right), minWidth: 設置列的最小寬度(不傳默認值), oper: 是否有操作列
oper.name: 操作列字段名稱, oper.clickFun: 操作列點擊事件, formatData: 格式化內容 -->
<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主要是有操作一欄， 操作一欄的內容是相同的， 數(shù)據不是動態(tài)獲取的，不過我這里操作一欄的名字定死了（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ù)據
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ù)據傳給table顯示
<table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></table>
其中 tableData是表格中要顯示的數(shù)據內容， 這個內容我的是從后臺查詢出來的， rowDblclick 是雙擊一行做的操作，如果不需要可以刪除， tableHeader 是表頭顯示的數(shù)據， loading 是表格加載的loading方式， 默認是沒有的
表頭數(shù)據格式如下： formatData 是表格里面的數(shù)據需要做處理的方法， oper是操作列，查看和編輯是兩個按鈕，handleClick和editClick點擊按鈕的方法， 自行補充。
export const tableHeader = [ // 表頭數(shù)據
{ prop: 'dhm', label: '時間', minWidth: '140px' },
{ prop: 'plazano', label: '編碼', minWidth: '100px' },
{ prop: 'plazano', label: '名稱', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) },
{ prop: 'car_plate', label: '號碼' },
{ prop: 'card_no', label: '卡號', minWidth: "120px" },
{ prop: 'laneno', label: '數(shù)據類型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } },
{ prop: 'staffname', label: '姓名', minWidth: '100px' },
{ prop: 'mediatype', label: '付款方式' },
{ prop: 'comp_cash', label: '計算費額' },
{ prop: 'fact_cash', label: '實收費額' },
{ prop: 'oper', label: '操作', fixed: 'right', minWidth: '140px',
oper: [
{ name: '查看', clickFun: handleClick },
{ name: '編輯', clickFun: editClick }
]
}
]
現(xiàn)在的代碼可能會報錯， 下面這處的代碼是在全局注冊了一個過濾器，如果不注冊就找不到這個方法就會報錯，所以還需要注冊一個全局過濾器，如果你不需要對數(shù)據做處理可以不要這個過濾器
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 這個參數(shù)傳進去的， 這里主要是因為不同的數(shù)據過濾的方法不一樣， 所以在表頭傳數(shù)據的時候就一并寫上處理數(shù)據的方法
如果很多地方都使用了同一個方法， 可以將這個方法注冊成全局方法， 那么在每個頁面就可以直接使用該方法， 不用重復去寫。
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: '數(shù)據類型', formatData: this.lanenoTransf },
最最后， 看我的表格：
總結
以上所述是小編給大家介紹的vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標文件轉換為Vue組件,本文主要介紹了vue3+vite項目中顯示SVG圖片的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要為大家詳細介紹了vue父子組件進行通信方式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
淺談element中InfiniteScroll按需引入的一點注意事項
這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
最近在做商城類的項目，需要使用到客服系統(tǒng)，用戶選擇的騰訊IM即時通信，所以本文主要介紹了vue實現(xiàn)集成騰訊TIM即時通訊，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3中動態(tài)獲取高寬,實現(xiàn)思路大概是將監(jiān)聽到的高度賦給你需要設置的對象，本文通過實例代碼給大家介紹的非常詳細，需要的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
在一般情況下,vue項目代碼部署發(fā)布只需將代碼打包后直接上傳到服務器即可,下面這篇文章主要給大家介紹了關于Vue項目打包并發(fā)布的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
最近公司新啟動了個項目，用的是vue框架在做,下面這篇文章主要給大家介紹了關于vue實現(xiàn)token登錄驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04