vue - common-table组件

<template>

<div class="table">

<el-table

:data="dataList"

:stripe="true"

:row-class-name="tableRowClassName"

:default-expand-all="expand"

:header-cell-style="tableHeaderColor"

@sort-change="sortChange"

style="width: 100%"

>

<el-table-column type="expand" v-if="expand" width="55">

<template slot-scope="scope">

<slot name="expand" :row="scope.row"></slot>

</template>

</el-table-column>

<template v-for="(item,index) in columnData">

<el-table-column

v-if="item.sortable"

:header-align="item.align"

:class-name="item.className"

:prop="item.key"

:sortable="'custom'"

:label="item.label"

:width="item.width"

:key="index"

>

<template slot-scope="scope">

<slot :name="item.key" :row="scope.row"></slot>

</template>

</el-table-column>

<el-table-column

v-if="!item.isSolt && !item.flag && !item.sortable"

:header-align="item.align"

:class-name="item.className"

:prop="item.key"

:label="item.label"

:width="item.width"

:key="index"

></el-table-column>

<el-table-column

v-if="item.isIcon && !item.isSolt && item.flag"

:header-align="item.align"

:class-name="item.className"

:prop="item.key"

:label="item.label"

:width="item.width"

:key="index"

>

<template slot-scope="scope">

<slot :name="item.key" :row="scope.row"></slot>

</template>

</el-table-column>

<el-table-column

v-if="item.isSolt"

:header-align="item.align"

:class-name="item.className"

:prop="item.key"

:label="item.label"

:width="item.width"

:key="index"

>

<template slot-scope="scope">

<!-- <el-button size="mini" ">修改</el-button> -->

<div class="btn-container" :class="[expand?'expand-btn':'']">

<span

class="operation-btn"

:class="[scope.row.disabled && scope.row.disabled == 1 ? 'disabled-btn':'']"

v-if="showDetailBtn && !scope.row.detailFlag"

@click="handleDetail(scope.$index, scope.row)"

>

<span v-if="scope.row.disabled">{{scope.row.disabled == 0 ? detailBtnTitle : '启用'}}</span>

<span v-else>{{detailBtnTitle}}</span>

</span>

<span

class="operation-btn"

v-if="shwoOperationBtn"

@click="handleOperation(scope.$index, scope.row)"

>{{OperationBtnTitle}}</span>

<span

class="operation-btn"

v-if="shwoUpdateBtn &&!scope.row.updateFlag"

@click="handleEdit(scope.$index, scope.row)"

>修改</span>

<span

class="operation-btn"

v-if="shwoDelBtn && !scope.row.delFlag"

@click="handleDelete(scope.$index, scope.row)"

>删除</span>

</div>

</template>

</el-table-column>

</template>

<template slot="append">

<div class="page-pagination">

<el-pagination

background

layout="prev, pager, next"

:total="total"

:page-size="pageSize"

:current-page="currentPage"

@current-change="pageChange"

></el-pagination>

</div>

</template>

</el-table>

</div>

</template>

<script>

export default {

name: "common-table",

props: {

columnData: {

type: Array,

default: () => {

return [];

}

},

tableData: {

type: Array,

default: () => {

return [];

}

},

expand: {

type: Boolean,

default: false

},

total: {

type: Number,

default: 0

},

pageSize: {

type: Number,

default: 20

},

currentPage: {

type: Number,

default: 1

},

shwoDelBtn: {

type: Boolean,

default: true

},

showDetailBtn: {

type: Boolean,

default: false

},

shwoOperationBtn: {

type: Boolean,

default: false

},

OperationBtnTitle: {

type: String,

default: "授权"

},

detailBtnTitle: {

type: String,

default: "详情"

},

shwoUpdateBtn: {

type: Boolean,

default: true

}

},

watch: {

currentPage: {

handler(val) {

console.log(val);

}

}

},

data() {

return {

msg: "common-table",

dataList: []

};

},

watch: {

tableData: {

handler(val) {

if (this.expand) {

let arr = JSON.parse(JSON.stringify(this.tableData));

const data = arr.reduce((prev, cur, index) => {

if (index % 2 == 0) {

cur.showBgColor = false;

} else {

cur.showBgColor = true;

}

prev.push(cur);

return prev;

}, []);

this.dataList = data;

} else {

this.dataList = this.tableData;

}

},

immediate: true

}

},

methods: {

tableHeaderColor({ row, rowIndex }) {

return "background:#E4E4E4";

},

sortChange(obj) {

this.$emit("sortChange", obj.order, obj.prop);

},

handleDetail(index, data) {

this.$emit("handleDetail", data);

},

handleOperation(index, data) {

this.$emit("handleOperation", data);

},

handleEdit(index, data) {

this.$emit("handleEdit", data);

},

handleDelete(index, data) {

this.$emit("handleDelete", data);

},

pageChange(data) {

this.$emit("handlePageChange", data);

},

tableRowClassName({ row, rowIndex }) {

// if (rowIndex === 1) {

// return "warning-row";

// } else if (rowIndex === 3) {

// return "success-row";

// }

return "";

}

}

};

</script>

<style lang="scss">

.table {

.expand-btn {

position: absolute;

left: -20px;

top: 30px;

z-index: 99;

margin-left: 20px;

}

.expand-column-style {

border-bottom: none;

}

.btn-container {

display: inline-flex;

justify-content: center;

width: 100%;

.operation-btn {

text-align: center;

display: block;

width: 80px;

height: 30px;

line-height: 30px;

margin-left: 10px;

background: #045735;

border-radius: 15px;

font-size: 14px;

font-family: SourceHanSansCN-Regular;

font-weight: 400;

color: #cfd525;

cursor: pointer;

}

}

.page-pagination {

height: 48px;

line-height: 48px;

}

.el-table .warning-row {

background: oldlace;

}

.el-table .success-row {

background: #f0f9eb;

}

.el-table__append-wrapper {

margin-top: 48px;

text-align: center;

width: 100%;

}

.disabled-btn {

background: #999999 !important;

color: #ffffff !important;

}

.el-pagination.is-background .el-pager li:not(.disabled).active {

background-color: #045735;

color: #fff;

}

.el-table::before {

height: 0px;

}

.el-table--striped .el-table__body tr.el-table__row--striped td {

background: #f4f4f4 !important;

}

.el-table th > .cell {

color: #333333;

font-weight: bold;

}

.el-table--enable-row-hover .el-table__body tr:hover > td {

background-color: transparent;

}

}

</style>