目錄問題分析為什么封裝封裝的內(nèi)容都有哪些封裝table組件確認(rèn)數(shù)據(jù)格式封裝組件封裝全局組件table組件封裝分頁組件封裝數(shù)據(jù)定義封裝總結(jié)

最近開了新的項(xiàng)目，簡(jiǎn)單說了自己的table封裝。

問題分析為什么封裝

首先為什么封裝，是因?yàn)樽非蠹夹g(shù)嗎，不，是因?yàn)閼校幌胍恢钡娜フ迟N復(fù)制代碼，所以就想把table封裝下，可以在創(chuàng)建新的table的時(shí)候，只需要填充數(shù)據(jù)就行了。

封裝的內(nèi)容都有哪些

主要有兩個(gè)，一個(gè)是table組件，一個(gè)是分頁組件

搞清楚這個(gè)些，就可以開始封裝組件了。

封裝table組件確認(rèn)數(shù)據(jù)格式

先確定數(shù)據(jù)格式,這個(gè)我們需要看下el-table組件

<el-table :data='tableData' style='width: 100%'> <el-table-column prop='date' label='日期' /> <el-table-column fixed='right' label='操作' width='100'> <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>

現(xiàn)在我們考慮數(shù)據(jù)類型，例如lebel， prop, widht 按鈕類型， 事件等等，

let paramsType = { data: Array, // 數(shù)據(jù) loading: Boolean, selectionShow: Boolean, columns:Array = [ { label: String, prop: String, filter: Function, isSlot: Boolean, width: Number, tempalte: Function, btns: Array = [{ name: String, btnType: String, clickType: String, routerType: String, url: String, query: Function, btnClick: Function} ] } ] }

定義號(hào)數(shù)據(jù)文檔后，我們就可以開始封裝組件了

封裝組件封裝全局組件

之所以封裝全局組件是為了省事，所有的目的，全都是為了偷懶。

src下創(chuàng)建components文件，里邊寫我們的組件，每個(gè)組件建議單獨(dú)文件夾，便于我們維護(hù)。

創(chuàng)建自己的table.vue組件，名字我的叫FrTable,內(nèi)容暫時(shí)先不說，先說引用。

全局使用

導(dǎo)入FrTable文件到components下的index.js文件中，在這里遍歷所有的組件，并導(dǎo)出

代碼如下：

import TrTable from ’./FrTable/index’const components = [TrTable]const install = (Vue) => { components.map(component => { Vue.component(component.name, component) })}if (typeof Window !== ’undefined’ && window.Vue) { install(Window.Vue)}export default { install}

然后導(dǎo)出到main.js中，通過Vue.use()來使用組件，如下

import globalComponents from ’@/components/index’Vue.use(globalComponents)

頁面中的使用

<fr-table />table組件封裝

考慮的問題

table中有多少種情況，

正常的數(shù)據(jù)類型展示 獨(dú)有的展示方式 有操作按鈕

第一種的類型那我們其實(shí)是不需要操作太多，只需要通過for循環(huán)渲染就可以了。

第二種其實(shí)也還好，我們可以通過slot做定制化處理

第三種，按鈕的操作。按鈕其實(shí)可以分多種類型

按鈕的類型

按鈕的正常使用，點(diǎn)擊功能 按鈕起跳轉(zhuǎn)作用 按鈕起打開新頁面的作用 按鈕起自定義事件的作用

代碼的編寫

通過上邊，我們已經(jīng)分析了table的所有問題，現(xiàn)在只需要敲代碼就可以了。

第一種情況

<el-table :data='data' border :loading='loading'><!-- 勾選 --> <el-table-column v-if='selectionShow' type='selection' :reserve-selection='true' /> <template v-for='(item, index) in columns'><el-table-column :key='index' v-bind='item'> <!-- 自定義表頭 --> <template v-if='item.customHeader' slot='header'> <slot :name='item.headerProp' /> </template> <template slot-scope='scope'> <span v-html='handleFilter(item, scope.row, item.prop)' /> </template></el-table-column> </template> </el-table>

這里我們可以看到handleFilter方法

這個(gè)方法來處理數(shù)據(jù)，

數(shù)據(jù)類型分為正常數(shù)據(jù)類型，需要轉(zhuǎn)化的數(shù)據(jù)類型，模板轉(zhuǎn)化的數(shù)據(jù)類型,

代碼如下

handleFilter(item, val, prop) { let value = val[prop] if (item.templet) value = item.templet(val) return item.filter ? this.$options.filters[item.filter](val[prop]) : value},

第一種情況比較簡(jiǎn)單，只是簡(jiǎn)單的數(shù)據(jù)渲染，和定制化的表頭渲染，上邊總體的是多選功能+正常的表單

第二種情況

自定義的列表

<template slot-scope='scope'> <!-- 自定義內(nèi)容 --> <slot v-if='item.isSlot' :name='item.prop' :row='scope.row'/ ></template>

自定義的類別，我們只需要isSlot設(shè)置為true，name為prop,row為data

第三種

第三種按鈕分四種情況

<template v-if='item.btns'> <el-button v-for='(btn, i) in item.btns' :key='i' :size='btn.mini ? btn.mini: ’small’' :type='btn.type ? btn.type: ’primary’' @click='btnClickfunc(btn, scope.row)' > {{ btn.name }} </el-button></template>

按鈕其實(shí)還是循環(huán)渲染的，主要是事件的分析，通過btnClickfunc事件操作。

btnClickfunc(column, row) { const path = {[column.routerType]: column.url,query: column.query ? column.query(row) : ’’ } if (column.clickType === ’router’) {this.$router.push(path) } else if (column.clickType === ’router_blank’) {const routeData = this.$router.resolve(path)window.open(routeData.href, ’_blank’) } else if (column.clickType === ’btnClick’) {column.btnClick(row) } else {this.$emit(’btnClickFunc’, { column: column, row: row }) }},

分不同的類型，我們做不同的處理。

props傳參的值

當(dāng)前的參數(shù)，和我們定義的參數(shù)是一致的，因此代碼如下

// 數(shù)據(jù) data: { type: Array, required: true }, // 表頭參數(shù) columns: { type: Array, required: true }, loading: { type: Boolean, default: false }, // 多選框選擇 selectionShow: { type: Boolean, default: false },

自此，只剩下了組件的使用方式了

組件的使用

<fr-table ref='mt' :loading='loading' :data='list' :columns='columns' ></fr-table>

大致如下，如果需要使用多選的時(shí)候，自行定義方法，排序也一樣。

分頁組件封裝

參考element分頁組件

<el-pagination background layout='prev, pager, next' :page-size='pageLimit' :total='total' :current-page='currentPage' @current-change='handleCurrentChange'/>handleCurrentChange(val) { console.log(val)}數(shù)據(jù)定義

定義如下：

total: Number,pageLimit: Number,currentPage: Number,封裝

<el-pagination background layout='prev, pager, next' :page-size='pageLimit' :total='total' :current-page='currentPage' @current-change='handleCurrentChange'/>handleCurrentChange(val) { this.$emit(’currentChange’, val)}

看上去是不是很簡(jiǎn)單，其實(shí)就是這么簡(jiǎn)單。

然后我們?cè)诮M件上把分頁事件和參數(shù)加上，我們整個(gè)table的組件封裝就完成了，至此，我們完成了整個(gè)table組件封裝的全部工作。

總結(jié)

到此這篇關(guān)于vue.js管理后臺(tái)table組件封裝的文章就介紹到這了,更多相關(guān)vue后臺(tái)table封裝內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！