用过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/>使用了
注意: 使用过程中如果有什么问题可以发留言哈,如果有什么好的建议,也欢迎随便提哦