自定义element-table列表展示（可设置按钮权限）
<template>
<div class="self_table">
<el-table
:data="tableData"
style="width: 100%"
v-loading="loading"
stripe
@selection-change="handleSelectionChange"
:header-cell-style="{
background: '#f0f7ff !important',
color: '#000',
fontSize: '12px',
textAlign: 'center',
}"
:cell-style="{
textAlign: 'center',
}"
>
<template slot="empty">
<div class="no_data_area">
<div class="no_data">div>
<div class="no_staff">
<span>暂无相关数据span>
div>
div>
template>
<el-table-column
type="selection"
width="55"
v-if="type"
>el-table-column>
<template v-for="(item, index) in columns">
<el-table-column
:key="'%' + index"
:show-overflow-tooltip="true"
:prop="item.prop"
:label="item.label"
:width="item.width"
:min-width="item.minWidth"
:sortable="item.sortable"
:fixed="item.fixed"
align="center"
>
<template slot-scope="scope">
<template v-if="item.prop == 'cover'">
<div style="width: 50px; height: 50px; margin: 0 auto">
<img
:src="scope.row[item.prop]"
alt=""
style="max-width: 100%"
/>
div>
template>
<template v-if="item.prop == 'start_time'">
{{ dateformat(scope.row["start_time"], "YYYY-MM-DD HH:mm:ss") }}
template>
<template v-else-if="item.prop == 'over_time'">
{{ dateformat(scope.row["over_time"], "YYYY-MM-DD HH:mm:ss") }}
template>
<template v-else-if="item.prop == 'create_time'">
{{ dateformat(scope.row["create_time"], "YYYY-MM-DD HH:mm:ss") }}
template>
<template v-else-if="item.prop == 'update_time'">
{{ dateformat(scope.row["update_time"], "YYYY-MM-DD HH:mm:ss") }}
template>
<template v-else-if="item.prop == 'birthday'">
{{ scope.row["birthday"] }}
template>
<template v-else-if="item.prop == 'gender'">
{{
scope.row["gender"] == 1
? "男"
: scope.row["gender"] == 2
? "女"
: "未知"
}}
template>
<template v-else-if="item.prop == 'user_type'">
<span>{{
scope.row["user_type"] == "master"
? "总部"
: scope.row["user_type"] == "sbu"
? "总部"
: scope.row["user_type"] == "dealer"
? "一级经销商"
: "门店"
}}span>
template>
<template v-else-if="item.prop == 'status'">
{{ scope.row["status"] }}
template>
<template v-else-if="item.prop == 'is_publish'">
<span style="width: 50px; height: 50px; margin: 0 auto">
<el-switch
:value="scope.row['is_publish'] == '0' ? false : true"
@change="tabrelease(scope.row)"
>
el-switch>
span>
template>
<template v-else>
{{ scope.row[item.prop] != null ? scope.row[item.prop] : "" }}
template>
template>
el-table-column>
template>
<el-table-column label="操作" :width="btnlong" v-if="showbtn">
<template slot-scope="scope">
<slot name="header" v-bind:date="scope.row">slot>
template>
el-table-column>
el-table>
<div class="com_page" v-if="pageObj && pageObj.total">
<el-pagination
layout="total, prev, pager, next, jumper"
:page-size="pageObj.size"
:total="pageObj.total"
:current-page="pageObj.currentPage"
@current-change="handleCurrentChange"
background
>
el-pagination>
div>
div>
template>
<script>
import { fissiontype, codelist } from "@/api/until";
export default {
data() {
return {
// 状态
fissiontype: fissiontype,
// 组织性质
codelist: codelist,
value: "",
};
},
props: {
// 表头
columns: {
type: Array,
default: () => [],
},
// 表格数据
tableData: {
type: Array,
default: () => [],
},
// 加载展示
loading: {
type: Boolean,
default: false,
},
// 高度
height: {
type: String,
default: () => "70vh",
},
// 分页
pageObj: {
type: Object,
default: function () {
return {
size: 10,
total: 0,
currentPage: 1,
};
},
},
// 是否多选
type: {
type: Boolean,
default: () => false,
},
// 按钮长度
btnlong: {
type: String,
default: "",
},
// 按钮是否显示
showbtn: {
type: Boolean,
default: () => true,
},
},
created() {},
methods: {
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
handleSelectionChange(val) {
this.$emit("handleSelectionChange", val);
},
tabrelease(val) {
this.$emit("switch", val);
},
},
};
script>
<style lang='less' scoped>
.self_table {
padding: 20px 0;
// /deep/.el-table {
// // height: calc(100% - 45px) !important;
// .el-table__header-wrapper {
// background: #f0f7ff;
// thead th {
// background: #f0f7ff;
// color: #333333;
// font-weight: bold;
// }
// }
// }
}
.com_page {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.btn_list {
display: flex;
// justify-content: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.grey_color {
color: #333;
}
/deep/::-webkit-scrollbar {
display: block !important;
height: 10px;
width: 6px;
background-color: #ddd;
}
style>
参数
<table-list
:columns="tableColumns"
:tableData="group_list"
:pageObj="pageObj"
:loading="loading"
:type="true"
@handleCurrentChange="handleCurrentChange"
@handleSelectionChange="handleSelectionChange"
@switch="release"
:btnlong="'200'"
>
<template #header="slotProps">
<el-button
@click="edit(slotProps.date)"
type="text"
size="small"
v-if="slotProps.date.is_publish == '0'"
>编辑</el-button
>
<el-button
@click="deleteInfo(slotProps.date)"
type="text"
size="small"
v-if="slotProps.date.is_withdraw == '0'"
>删除</el-button
>
</template>
</table-list>
loading: false,
group_list: [], //群体管理列表
tableColumns: [
{
prop: "content",
label: "常用语",
},
{
prop: "update_time",
label: "更新时间",
},
{
prop: "use_times",
label: "使用次数",
},
{
prop: "is_publish",
label: "是否发布",
},
],
pageObj: {
size: 10,
currentPage: 1, //前往当前页
total: 0,
},
展示效果
