CommonTable.vue
<template>
<div class="common-table">
<el-table
ref="commonTable"
:data="list"
border
fit
:expand-row-keys="$attrs['expand-row-keys']"
:default-expand-all="$attrs['default-expand-all']"
:lazy="$attrs.hasOwnProperty('lazy')"
:stripe="$attrs.hasOwnProperty('stripe')"
:row-class-name="$attrs['row-class-name']"
:cell-style="$attrs['cell-style']"
:row-style="$attrs['row-style']"
:cell-class-name="$attrs['cell-class-name']"
:header-row-class-name="$attrs['header-row-class-name']"
:header-row-style="$attrs['header-row-style']"
:header-cell-class-name="$attrs['header-cell-class-name']"
:header-cell-style="$attrs['header-cell-style']"
:row-key="$attrs['row-key']"
:tree-props="$attrs['tree-props']"
:span-method="$attrs['span-method']"
:load="$attrs['load']"
@selection-change="handleSelectionChange"
v-loading="loading"
>
<slot name="selection"/>
<slot name="indexColumn"/>
<template v-for="(item, index) in columns">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width ? item.width : null"
:min-width="item.minWidth ? item.minWidth : null"
:sortable="item.sortable ? item.sortable : false"
:align="item.align ? item.align:'center'"
:fixed="item.fixed ? item.fixed : null"
:show-overflow-tooltip="item.tooltip"
>
<template v-slot="scope">
<template v-if="item.render">{{item.render(scope.row)}}</template>
<template v-else-if="item.slotName">
<slot :name="item.slotName" :row="scope.row"></slot>
</template>
<template v-else>
{{scope.row[item.prop]}}
</template>
</template>
</el-table-column>
</template>
<slot name="operColumn"/>
</el-table>
<el-pagination v-show="pager.total > 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="text-align: right;margin:20px 0;"
:current-page="pager.pageNum"
:page-size="pager.limit || pager.pageSize"
:page-sizes="pageSizes"
:total="pager.total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'commonTable',
props: {
loading: {
type: Boolean,
default: () => false
},
columns: Array,
list: Array,
pager: Object,
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 40, 50, 100]
}
}
},
methods: {
handleSelectionChange(val) {
this.$emit('handleSelectionChange', val);
},
handleSizeChange(val) {
this.$emit('handleSizeChange', val);
},
handleCurrentChange(val) {
this.$emit('handleCurrentChange', val);
},
}
}
</script>
页面使用
<CommonTable :columns="columns" :list="tableList" :pager="pager" @handleSizeChange="pageSizeChange"
@handleCurrentChange="pageNumChange" v-loading="loadingTableList">
<span slot="pictureType" slot-scope="{row}">{{row.type | typeFilter}}</span>
<el-table-column slot="operColumn" align="center" label="操作" width="300">
<template slot-scope="scope">
<el-button type="text" @click="view(scope.row)" icon="el-icon-view">查看</el-button>
<el-button type="text" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button type="text" class="btn-danger" @click.native.prevent="remove(scope.row)"
icon="el-icon-delete">删除
</el-button>
</template>
</el-table-column>
</CommonTable>
/*
*columns数据
columns: [
{prop: "id", label: "头图ID"},
{prop: "name", label: "头图名称"},
{prop: "type", label: "类型", slotName: 'pictureType'}
],
*/