目錄問題分析為什么封裝封裝的內容都有哪些封裝table組件確認數據格式封裝組件封裝全局組件table組件封裝分頁組件封裝數據定義封裝總結

最近開了新的項目，簡單說了自己的table封裝。

問題分析為什么封裝

首先為什么封裝，是因為追求技術嗎，不，是因為懶，不想一直的去粘貼復制代碼，所以就想把table封裝下，可以在創建新的table的時候，只需要填充數據就行了。

封裝的內容都有哪些

主要有兩個，一個是table組件，一個是分頁組件

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

封裝table組件確認數據格式

先確定數據格式,這個我們需要看下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>

現在我們考慮數據類型，例如lebel， prop, widht 按鈕類型， 事件等等，

let paramsType = { data: Array, // 數據 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} ] } ] }

定義號數據文檔后，我們就可以開始封裝組件了

封裝組件封裝全局組件

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

src下創建components文件，里邊寫我們的組件，每個組件建議單獨文件夾，便于我們維護。

創建自己的table.vue組件，名字我的叫FrTable,內容暫時先不說，先說引用。

全局使用

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

代碼如下：

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}

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

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

頁面中的使用

<fr-table />table組件封裝

考慮的問題

table中有多少種情況，

正常的數據類型展示 獨有的展示方式 有操作按鈕

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

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

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

按鈕的類型

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

代碼的編寫

通過上邊，我們已經分析了table的所有問題，現在只需要敲代碼就可以了。

第一種情況

<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方法

這個方法來處理數據，

數據類型分為正常數據類型，需要轉化的數據類型，模板轉化的數據類型,

代碼如下

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},

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

第二種情況

自定義的列表

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

自定義的類別，我們只需要isSlot設置為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>

按鈕其實還是循環渲染的，主要是事件的分析，通過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傳參的值

當前的參數，和我們定義的參數是一致的，因此代碼如下

// 數據 data: { type: Array, required: true }, // 表頭參數 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>

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

分頁組件封裝

參考element分頁組件

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

定義如下：

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)}

看上去是不是很簡單，其實就是這么簡單。

然后我們在組件上把分頁事件和參數加上，我們整個table的組件封裝就完成了，至此，我們完成了整個table組件封裝的全部工作。

總結

到此這篇關于vue.js管理后臺table組件封裝的文章就介紹到這了,更多相關vue后臺table封裝內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！