0
点赞
收藏
分享

微信扫一扫

将element-ui table封装,和pagination封装到一起


用过antdv的table组件之后,再用element 的table实在不方便,就封装了一下,模仿antdv的使用方法,将分页组件也封入到组件中

原始用法:

缺点:有多少列就要写多少个el-table-column, 分页组件也需要每次引入,同一段代码不断的重复写

<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>

封装之后的组件使用: 用法同antdv

<base-table
:data="tableData"
:stripe="true"
:pagination="pagination"
:table-title="tableTitle">
<template #warnLevel="{row}">
<span :style="{color: colorDict[row.warnLevel].color}">{{ colorDict[row.warnLevel].label }}</span>
</template>
</base-table>

tableTitle就是我们的所有列,该对象的所有属性同element ui 中的Table-column属性,例如:

const tableTitle = [
{
key: 'name',
title: '设施名称',
sortable: true
},
{
key: 'comp',
title: '设施类型',
sortable: true
},
{
key: 'county',
title: '分公司',
sortable: true
},
{
key: 'town',
title: '灾害类型',
sortable: true
},
{
key: 'town',
title: '影响时间',
sortable: true
},
{
key: 'town',
title: '灾害电压',
sortable: true
},
{
key: 'warnLevel',
title: '预警等级',
sortable: true,
scopedSlots: { customRender: 'warnLevel' } // 个性化需要设置此字段
}
];

下面提供一下完整的封装组件: 

<template>
<div class="base-table-wrap">
<el-table
v-bind="$attrs"
:class="[extraClass]"
style="width: 100%"
header-cell-class-name="jt-table-header"
v-on="$listeners">
<el-table-column
v-for="(column, idx) in tableTitle"
:key="idx"
:label="column.title"
:prop="column.key"
:show-overflow-tooltip="tooltip"
v-bind="column"
>
<template slot-scope="scope">
<slot
v-if="column.scopedSlots && column.scopedSlots.customRender"
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
v-bind="scope"
v-on="$listeners"
/>
<span v-else>{{ scope.row[column.key] }}</span>
</template>


</el-table-column>
</el-table>
<el-pagination
v-if="pagination"
:current-page="pagination.page"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagination.limit"
:total="pagination.total"
background
class="system-pagination"
layout="prev, pager, next,sizes,jumper"
@size-change="sizeChange"
@current-change="pageChange"/>
</div>


</template>

<script>
export default {
name: 'BaseTable',
props: {
tableTitle: {
type: Array,
default: () => []
},
pagination: {
type: [Object, Boolean],
default: () => {}
},
sizeChange: {
type: Function,
default: () => {}
},
pageChange: {
type: Function,
default: () => {}
},
theme: {
type: String,
default: 'light'
},
tooltip: {
type: Boolean,
default: true
},
extraClass: {
type: String,
default: ''
}
}
};
</script>

<style lang="scss">
.base-table-wrap::after {
display: block;
content: 'clear';
clear: both;
line-height: 0;
visibility: hidden;
}
.jt-table-header {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.light {
.el-table__header-wrapper {
background-color: #f6f6f6;
}
}
</style>

 

在main.js 中引入

import BaseTable from '@/components/Base/BaseTable';

Vue.component('base-table', BaseTable);

然后就可以在组件中直接<base-table/>使用了

 

注意: 使用过程中如果有什么问题可以发留言哈,如果有什么好的建议,也欢迎随便提哦

举报

相关推荐

0 条评论