<myfrom
:roleList="goodList"
:columns="columns"
:expandOptions="expandOptions"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
:total="total"
:pageSize="pagesize"
:currentPage="pagenum"
:showPaging="showPaging"
:indexOptions="indexOptions"
:table="table"
>
<template v-slot:state="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="editor(scope.scope.row)"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="delGood(scope.scope.row)"
></el-button>
</template>
</myfrom>
配置
表格的列配置项
return{
columns: [
{
label: "商品名称",
prop: "goods_name",
align: "center",
width: "800",
},
{
label: "商品价格(元)",
prop: "goods_price",
align: "center",
},
{
label: "商品重量",
prop: "goods_weight",
align: "center",
},
{
label: "创建时间",
align: "center",
prop: "add_time",
},
{
label: "操作",
align: "center",
slots: "state",
},
{
label: "展示",
align: "center",
prop: "show",
slots: "state",
},
],
}
分页配置
return{
pagesizes: [5, 10, 20, 30],
pagesize: 10,
pagenum: 1,
showPaging: true,
}
索引配置
return{
indexOptions: {
label: "#",
align: "center",
indexMethod: 0,
showIndex: true,
},
}
table配置
return{
table: {
stripe: true,
border: true,
size: "medium",
},
}
是否展开行
return{
expandOptions: true,
}
封装内容
<template>
<div>
<el-table
:data="roleList"
:border="table.border"
:stripe="table.stripe"
:size="table.size "
:row-key="table.rowkey"
v-loading="!roleList.length"
:tree-props="table.treeprops"
>
<!-- 展示索引条件(需要传入索引的配置对象) -->
<el-table-column
type="index"
:label="indexOptions.label"
:align="indexOptions.align"
:width="indexOptions.width"
:index="indexOptions.indexMethod"
v-if="indexOptions"
></el-table-column>
<el-table-column type="expand" v-if="expandOptions">
<template slot-scope="scope">
<slot name="expand" :scope="scope"></slot>
</template>
</el-table-column>
<!-- 展示表头条件(需要传入表头的配置对象) -->
<template v-for="(item,index) in columns">
<!-- 索引展示 -->
<el-table-column
v-if="item.prop"
:label="item.label"
:prop="item.prop"
:width="item.width"
:align="item.align"
:key="index"
>
<template slot-scope="scope">
<slot v-if="item.slots" :name="item.slots" :scope="scope"></slot>
<template v-else>{
{
scope.row[item.prop]}}</template>
</template>
</el-table-column>
<el-table-column
v-else
:key="index"
:label="item.label"
:prop="item.prop"
:width="item.width"
:align="item.align"
>
<!-- 操作按钮插槽 -->
<template slot-scope="scope">
<slot :name="item.slots" :scope="scope"></slot>
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页展示 -->
<div v-if="showPaging" class="paging">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {
expandOptions: {
type: Boolean,
},
table: {
type: Object,
},
indexOptions: {
type: Object,
},
roleList: {
type: Array,
required: true,
},
columns: {
type: Array,
required: true,
},
total: {
type: [Number, String],
default: 0,
},
showPaging: {
type: Boolean,
default: true,
},
currentPage: {
type: [Number, String],
default: 1,
},
pageSizes: {
type: Array,
default: () => [5, 10, 20, 30],
},
pageSize: {
type: [Number, String],
default: 10,
},
},
components: {
},
data() {
return {
};
},
methods: {
filterTag(value, row) {
return row.tag === value;
},
handleSizeChange(val) {
this.$emit("handleSizeChange", val);
},
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
},
mounted() {
},
watch: {
},
computed: {
},
};
</script>
<style scoped lang='scss'>
.paging {
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: 20px;
}
</style>