element UI 封装table组件
tableWrapper.js
<template>
<div>
<el-table
:height="settings.height"
v-loading="settings.isLoading"
:header-cell-style="{background:'#FAFAFA',color:'rgba(0,0,0,0.85)',height:'54px'}"
@selection-change="e => handleClick('select',e)"
:data="data"
style="width: 100%"
>
<el-table-column v-if="settings.isSelection" width="55" type="selection" fixed align="center"></el-table-column>
<el-table-column v-if="settings.isIndex" type="index" :index="1" fixed align="center"></el-table-column>
<template v-for="(item,index) in header">
<el-table-column
v-if="item.prop!=='action'"
:key="item.prop"
:type="item.type"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
align="center"
>
<template slot-scope="scope">
//过滤器
<span v-if="item.filter">{
{
obj.sex(1)}}</span>
<span v-if="!item.filter">{
{
item.formatter
? item.formatter(scope.row[item.prop || item.showField])
: scope.row[item.prop || item.showField]
}}</span>
</template>
</el-table-column>
<el-table-column
v-if="item.prop==='action'"
:key="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
align="center"
>
<template slot-scope="scope">
<template v-if="item.arr">
<el-button
size="mini"
:type="item2.type=='delete'?'danger':'text'"
v-for="item2 in item.arr"
:key="item2.type"
@click="item2.fun(scope.$index, scope.row)"
>{
{
item2.name}}
</el-button>
</template>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination
v-if="settings.isPagination"
background
style="text-align:right;padding:6px 0"
@size-change="e=>handleClick('pageSize',e)"
@current-change="e=>handleClick('currentPage',e)"
:current-page="currentPage"
:page-sizes="[20, 50, 100, 200]"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="settings.total"
></el-pagination>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
obj: {
sex: function (sex) {
if (sex === 1) {
return '女'
}
return '男'
}
}
}
},
props: {
data: {
type: Array, default: () => []},
header: {
type: Array, required: true},
settings: {
type: Object,
default: () => {
return {
height: null,
isBorder: false,
isLoading: false,
isIndex: false,
isSelection: false,
isPagination: false,
currentPage: 1,
total: 20
};
}
}
},
computed: {
currentPage: function () {
return this.settings.currentPage;
}
},
methods: {
handleClick(type, e, i) {
this.$emit("select", e);
}
}
};
</script>
<style lang="" scoped>
</style>
组件内引入
<table-wrapper @select="handleSelect" :data="tableData" :header="tableHeade" :settings="tableSettings"></table-wrapper>
import tableWrapper from '@/components/tableWrapper'
components: {
tableWrapper,
},
data() {
return {
tableData: [],
tableHeade: [
{
prop: "name", label: "姓名", width: 120},
{
prop: "phone", label: "联系方式", width: 120, fixed: true},
{
prop: "job", label: "工作", width: 80},
{
prop: "type", label: "类型", width: 160},
{
prop: "status", label: "信用金审核状态", width: 160},
{
prop: "time1", label: "时间1", width: 160},
{
prop: "time1", label: "时间2", width: 160},
{
prop: "action", label: "操作", fixed: 'right', arr: [{
type: 'text',
name: '编辑',
fun: this.fun
}]
},
],
tableSettings: {
height: "calc(90vh - 300px)",
title: "element UI 封装table组件",
isPagination: true,
total: 100,
isSelection: true
},
}
},
methods:{
fun(index, row) {
console.log(index, row)
},
handleSelect(e) {
console.log(e)
},
}