element ui Table 二次封装
表格的分页
- 在利用
element ui Table编写项目时,会存在表格展示的数据存在分页的情况- 普遍的做法
// 利用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根据后台接口数据返回 } } computed:{ columns(){ // 表头信息 /** * 表头信息为什么写在computed里面 * 由于我最近所的项目是基于i18n国际化的 * 如果写在data里面，不能根据i18n的语言切换实时进行切换 **/ return [ {lable:'标题1',prop:'title1'}, {lable:'标题2',prop:'title2'}, {lable:'标题3',prop:'title3'}, ] } } } </script>这样我们就实现了简单的table表格封装，在需要使用的地方直接引入我们封装好的组件传入对应对应的参数就能实现表格的展示与分页和选择框的展示了。
列表中单元格的内容自定义
- 上面我们已经实现了简单的'element ui Table'封装，但是还是不能实现一些复杂的表格展示，如图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: { // 总页数
type: Number,
default: 1
},
totalPage: { // 总条数
type: Number,
default: 1
},
currentPage: { // 当前页
type: Number,
default: 1
},
pageSize: { // 每页显示条数
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表头数据
type: Array,
default: () => {
return []
}
},
tableOption: { // 操作功能按钮数据
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: [], // 根据后台接口获得
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>
