element ui Table 二次封裝
表格的分頁
- 在利用
element ui Table編寫項目時,會存在表格展示的數(shù)據(jù)存在分頁的情況- 普遍的做法
// 利用element ui 的 el-table與el-pagination <el-table :data="data"> <el-table-column type="selection" widht="48"></el-table-column> <el-table-column v-for="(item,index) in columns" :key="index" :lable="item.lable" :prop="item.prop"></el-table> </el-table> <el-pagination layout="prev, pager, next" :total="50"></el-pagination>每次編寫都需要寫那么多的標簽與方法等，何不再進行封裝雄嚣，只需編寫一個標簽就完成Table表格與分頁的展示呢- 封裝后
// 新建我們的組件文件如MyTable.vue文件 <template> <div class="myTable"> <el-table :data="tableData"> <el-table-column v-if="hasSelection" type="selection" widht="48"></el-table-column> <el-table-column v-for="(item,index) in columns" :key="index" :lable="item.lable" :prop="item.prop"></el-table> </el-table> <el-pagination v-if="hasPagination" layout="prev, pager, next" :total="50"></el-pagination> </div> </template> <script> export default { name:'myTable', props:{ hasSelection:{ type:Boolean, default:false }, hasPagination:{ type:Boolean, default:false }, tableData:{ type:Object, default:()=>{return {}} }, columns:{ type:Object, default:()=>{return {}} } }, data(){ return {} }, } </script>- 在需要使用的頁面使用
<template> <myTable :hasSelection="hasSelection" :hasPagination="hasPagination" :tableData="tableData" :columns="columns"></myTable> </tempalte> <script> import myTable from '@/components/MyTable' export default { name:'***', components:{myTable} data(){ return { hasSelection:true, hasPagination:true, tableData:{} // tableData根據(jù)后臺接口數(shù)據(jù)返回 } } computed:{ columns(){ // 表頭信息 /** * 表頭信息為什么寫在computed里面 * 由于我最近所的項目是基于i18n國際化的 * 如果寫在data里面，不能根據(jù)i18n的語言切換實時進行切換 **/ return [ {lable:'標題1',prop:'title1'}, {lable:'標題2',prop:'title2'}, {lable:'標題3',prop:'title3'}, ] } } } </script>這樣我們就實現(xiàn)了簡單的table表格封裝肄渗，在需要使用的地方直接引入我們封裝好的組件傳入對應對應的參數(shù)就能實現(xiàn)表格的展示與分頁和選擇框的展示了。
列表中單元格的內(nèi)容自定義
- 上面我們已經(jīng)實現(xiàn)了簡單的'element ui Table'封裝咬最，但是還是不能實現(xiàn)一些復雜的表格展示翎嫡，如圖1：
table_test.png
- 封裝組件
<template>
<div class="Ab_tbale">
<el-table
ref="table"
element-loading-text="Loading"
:data="tableData"
border
:fit="true"
tooltip-effect="dark"
style="width:100%"
:max-height="maxHeight"
@selection-change="handlerSelectChange"
@select="handlerSelect"
@select-all="handlerSelectAll"
>
<el-table-column
v-if="hasSelect"
type="selection"
width="38"
><!--------></el-table-column>
<el-table-column
v-for="(item,index) in columns"
:key="index"
:width="item.width ? item.width : ''"
:align="item.align"
:label="item.label"
:prop="item.param"
:sortable="item.sortable ? 'custom' : false"
>
<template slot-scope="scope">
<expand-dom v-if="item.render" :column="item" :row="scope.row" :render="item.render" :index="index">
<!-- {{ item.render(scope.row) }} -->
</expand-dom>
<span v-else>{{ scope.row[item.param] }}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableOption.label"
:fixed="tableOption.fixed"
:width="tableOption.width"
:min-width="tableOption.minWidth"
:label="tableOption.label"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<template v-for="(item,index) in tableOption.options">
<el-button
:key="index"
:disabled="item.disabled?item.disabled(scope.row):false"
:type="item.type"
:size="item.size?item.size:''"
:icon="item.icon"
@click="handleButton(item.methods,scope.row,scope.row)"
>
{{ item.label }}
</el-button>
</template>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="hasPageTotal"
background
:current-page="currentPage"
:page-size="pageSize"
:page-count="pageCount"
layout="prev, pager, next"
:total="totalPage"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Table',
components: {
expandDom: {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params)
}
}
},
props: {
pageCount: { // 總頁數(shù)
type: Number,
default: 1
},
totalPage: { // 總條數(shù)
type: Number,
default: 1
},
currentPage: { // 當前頁
type: Number,
default: 1
},
pageSize: { // 每頁顯示條數(shù)
type: Number,
default: 10
},
maxHeight: { // 最大高度
type: String,
default: ''
},
hasPageTotal: { // 是否顯示分頁
type: Boolean,
default: false
},
hasSelect: { // 是否有選擇框
type: Boolean,
default: false
},
tableData: { // table表單Object
type: Array,
default: () => {
return []
}
},
columns: { // table表頭數(shù)據(jù)
type: Array,
default: () => {
return []
}
},
tableOption: { // 操作功能按鈕數(shù)據(jù)
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
}
},
created() {
},
methods: {
handlerSelectAll(val) {
this.$emit('handlerSelectAll', val)
},
handlerSelect(value, obj) { // 選中項
this.$emit('handlerSelect', value)
},
handlerSelectChange(value) {
this.$emit('handlerSelectChange', value)
},
handleButton(methods, row, index) { // 按鈕事件
this.$emit('handleButton', { 'methods': methods, 'row': row, 'index': index })
},
handleCurrentChange(val) {
console.log(`當前頁: ${val}`)
this.$emit('handlePageChange', val)
}
}
}
</script>
<style lang="scss">
.Ab_tbale{
.el-pagination{
text-align: right;
}
th{
background-color:#f5f5f5;
font-weight: bold;
}
.el-table-column--selection div.cell{
text-overflow: initial !important;
}
}
</style>
- 組件使用
<template>
<myTable
:table-data="tableData"
:columns="columns"
:table-option="tableOption"
:max-height="'600px'"
:has-select="true"
:total-page="pageData.total"
:current-page="pageIndex"
:page-count="pageData.last"
:page-size="pageData.limit"
:has-page-total="true"
@handleButton="handleButton"
@handlePageChange="handlePageChange"
></myTable>
</template>
<script>
import myTable from '@/components/MyTable'
import { getOrderList } from '@/api/order'
export default {
name:'****',
components:{myTable},
data () {
return {
tableData: [], // 根據(jù)后臺接口獲得
pageData: {}, // 頁碼對象
pageIndex: 1
}
},
computed: {
columns() { // 表頭配置對象
return [
{ label: this.$t('orderManagement.orderNum'), param: 'no', align: 'center', width: '' },
{ label: this.$t('orderManagement.orderTitle'), param: 'title', align: 'center', width: '' },
{ label: this.$t('orderManagement.totalSum'), param: 'totalFee', align: 'center', width: '', render: (h, params) => {
return h('span', { class: { 'order_status_color_orang': true }}, params.row.dealFee)
} },
{ label: this.$t('orderManagement.orderType'), param: 'statusLabel', align: 'center', width: '', render: (h, params) => {
return h('span', {
class: {
'order_status_color_gress': params.row.status === 1,
'order_status_color_red': params.row.status === 2 || params.row.status === 4,
'order_status_color_orang': params.row.status === 3,
'order_status_color_blue': params.row.status === 5
}
}, params.row.statusLabel)
} }
]
},
tableOption() { // 操作按鈕配置對象
return {
label: this.$t('orderManagement.operation'),
width: '',
minWidth: this.minWidth,
fixed: 'right',
options: [
{ label: this.$t('default.see'), type: 'default', icon: 'el-icon-view', methods: 'preview', size: 'mini' },
{ label: this.$t('default.payment'), type: 'primary', icon: 'el-icon-shopping-cart-2', methods: 'payment', size: 'mini', disabled: item => {
if (item.status === 3 || item.status === 4 || item.status === 5) {
return true
} else {
return false
}
} },
{ label: this.$t('orderManagement.orderClose'), type: 'danger', icon: 'el-icon-error', methods: 'close', size: 'mini', disabled: item => {
if (item.status < 3) {
return false
} else {
return true
}
} }
]
}
}
},
mounted(){
this.getList()
},
methods: {
handlePageChange(pageIndex) {
var data = {}
data.page = pageIndex
getOrderList(data).then(res => {
if (res.code === 0) {
this.tableData = res.data.list
this.pageData = res.data.page
}
})
},
getList() {
var data = {}
data.page = this.pageIndex
getOrderList(data).then(res => {
if (res.code === 0) {
this.tableData = res.data.list
this.pageData = res.data.page
}
})
},
handleButton(data) {
var funType = data.methods
if (funType === 'close') {
this.orderClose(data.row.no)
} else {
this.showPopDetial(data.methods, data.row.no)
this.selectOrderItem = data.row
}
}
}
}
</script>
