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"@...
<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>
更多推荐
所有评论(0)