<template>
<div class="simpleTable">
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="item in tableConfig"
:key="item.prop"
:prop="item.prop"
:label="item.label"
>
<template slot-scope="scope">
<slot :scope="scope.row" :name="item.prop">
<span>{{ scope.row[item.prop] }}</span>
</slot>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
@pagination="getList"
/>
</div>
</template>
<script>
/* 简易表格组件 */
export default {
props: {
/**
* 表格数据
*/
tableData: {
type: Array,
default: () => [],
},
/** 表格配置信息 */
tableConfig: {
type: Array,
default: () => [],
},
/** 总条数 */
total: {
type: Number,
default: 0,
},
},
created() {},
data() {
return {
queryParams: {
current: 1,
size: 10,
},
};
},
methods: {
getList() {
this.$emit("getQueryData", this.queryParams);
},
},
};
</script>
<style lang="scss" scoped></style>
04-20
2860
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-25
1852
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-27
2059
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)