|
|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <div class="custom-table" :style="{ height }">
|
|
|
+ <el-table
|
|
|
+ style="width: 100%;"
|
|
|
+ ref="tableRef"
|
|
|
+ class="customer-table"
|
|
|
+ v-bind="$attrs"
|
|
|
+ :height="tableHeight"
|
|
|
+ :border="false"
|
|
|
+ highlight-current-row
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ header-row-class-name="header-row"
|
|
|
+ :header-row-style="{
|
|
|
+ color: '#FFFFFF'
|
|
|
+ }"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ @row-click="rowClick"
|
|
|
+ :row-key="getRowKeys"
|
|
|
+ @selection-change="seleChange"
|
|
|
+ >
|
|
|
+ <el-table-column v-if="selection" type="selection" width="55" reserve-selection />
|
|
|
+
|
|
|
+ <el-table-column v-if="indexed" type="index" width="55" :index="tableIndex" label="序号" align="center" />
|
|
|
+
|
|
|
+ <el-table-column v-for="column in tableHeader" :max-width="200" :key="column.prop" show-overflow-tooltip v-bind="column" align="center">
|
|
|
+ <template #default="{ row ,$index}">
|
|
|
+ <slot :name="column.prop" :row="row" :index="$index">{{ row[column.prop] }}</slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="100" align="center" v-if="showHandle">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleClick('edit', scope.row)" type="text" size="small">修改</el-button>
|
|
|
+ <el-button @click="handleClick('delete', scope.row)" type="text" size="small">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <slot></slot>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pager" v-if="layout.indexOf('pager') > 0">
|
|
|
+ <custom-pagination v-if="showPager" v-bind="$attrs" :pageNo="pageParam.pageNo" :pageSize="pageParam.pageSize" :total="pageParam.total" :layout="layout" @pager-change="handlePagerChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script name="CustomTable">
|
|
|
+ /**
|
|
|
+ * @desc 自定义表格
|
|
|
+ * @prop {String} height class="custom-table" 外层容器高度
|
|
|
+ * @prop {Boolean} indexed 是否展示序号
|
|
|
+ * @prop {Boolean} selection 是否展示checkbox
|
|
|
+ * @prop {Boolean} showPager 是否展示分页器
|
|
|
+ * @prop {Object} pageParam 分页参数
|
|
|
+ * @author 马晓筱
|
|
|
+ * @date 20220606
|
|
|
+ */
|
|
|
+
|
|
|
+ import CustomPagination from '../base-pagination/index.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ CustomPagination
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ indexed: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ selection: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ showPager: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ tableHeader: {
|
|
|
+ type: Array,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ pageParam: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ layout: {
|
|
|
+ type: String,
|
|
|
+ default: 'total, sizes, prev, pager, next, jumper'
|
|
|
+ },
|
|
|
+ showHandle: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ return this.showPager ? 'calc(100% - 55px)' : '100%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ getRowKeys(row) {
|
|
|
+ return row.code
|
|
|
+ },
|
|
|
+ cellClick(row, column, cell, event) {
|
|
|
+ this.$emit('cellClick', row, column, cell, event)
|
|
|
+ },
|
|
|
+ rowClick(row, column, event) {
|
|
|
+ this.$emit('rowClick', row, column, event)
|
|
|
+ },
|
|
|
+ handlePagerChange(pageNo) {
|
|
|
+ this.$emit('handlePagerChange', pageNo)
|
|
|
+ },
|
|
|
+ tableIndex(index) {
|
|
|
+ return (this.pageParam.pageNo - 1) * this.pageParam.pageSize + index + 1
|
|
|
+ },
|
|
|
+ seleChange(e) {
|
|
|
+ this.$emit('seleChange', e)
|
|
|
+ },
|
|
|
+ handleClick(funName, e) {
|
|
|
+ this.$parent[funName](e)
|
|
|
+ },
|
|
|
+ clearSelection() {
|
|
|
+ this.$refs.tableRef.clearSelection()
|
|
|
+ },
|
|
|
+ // getRowClass({ row, column, rowIndex, columnIndex }) {
|
|
|
+ // if (rowIndex === 0) {
|
|
|
+ // return "height:32px;background: #0A489C;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;border: 0px;";
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if (rowIndex % 2 === 1) {
|
|
|
+ return 'warning-row'
|
|
|
+ } else if (rowIndex === 3) {
|
|
|
+ // return "success-row";
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .custom-table {
|
|
|
+ .pager {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-loading-mask {
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ //设置背景为空
|
|
|
+ /deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+ /deep/.el-table {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+ /deep/.el-table tr {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+ /deep/.el-table td.el-table__cell div {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-table .el-table__cell {
|
|
|
+ background: transparent !important;
|
|
|
+ padding: 4px 0px !important;
|
|
|
+ }
|
|
|
+ // /deep/.el-table__inner-wrapper::before {
|
|
|
+ // display: none !important;
|
|
|
+ // }
|
|
|
+ /deep/.el-table__body tr.current-row > td {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+ //去掉头部边框线
|
|
|
+ /deep/.el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: transparent !important;
|
|
|
+ }
|
|
|
+ //去掉边框线
|
|
|
+ /deep/.el-table td.el-table__cell {
|
|
|
+ border-bottom: transparent !important;
|
|
|
+ }
|
|
|
+ //去掉下边框
|
|
|
+ .el-table::before {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-table .header-row {
|
|
|
+ background: #0a489c !important;
|
|
|
+ }
|
|
|
+ /deep/.el-table .warning-row {
|
|
|
+ background: #0a489c !important;
|
|
|
+
|
|
|
+ //重线去除
|
|
|
+ // .el-table__cell {
|
|
|
+ // border: 1px solid #0a489c !important;
|
|
|
+ // }
|
|
|
+ // border-radius: 4px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // /deep/.el-table .success-row {
|
|
|
+ // background-color: #012456 !important;
|
|
|
+ // }
|
|
|
+ // /deep/.el-table th.el-table__cell {
|
|
|
+ // //重线去除
|
|
|
+ // border: 1px solid #0a489c !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ //分页样式修改
|
|
|
+ // /deep/ .el-pager li:hover {
|
|
|
+ // /* color: #1890ff; */
|
|
|
+ // color: #dbdbdb;
|
|
|
+ // }
|
|
|
+ /deep/ .el-pager li.active {
|
|
|
+ background-color: transparent !important;
|
|
|
+ // border: 1px solid #3ea6fe;
|
|
|
+ border-color: #3ea6fe;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: FZLTHK;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #3ea6fe !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ height: 28px !important;
|
|
|
+ line-height: 28px !important;
|
|
|
+ border-color: #c9c9c9;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ // /deep/ .el-input__inner:hover {
|
|
|
+ // border-color: #C9C9C9;
|
|
|
+ // }
|
|
|
+ /deep/.el-pagination__sizes .el-input .el-input__inner:hover {
|
|
|
+ border-color: #ebebeb;
|
|
|
+ }
|
|
|
+ /deep/.el-pagination button {
|
|
|
+ color: #dbdbdb;
|
|
|
+ }
|
|
|
+ /deep/ .el-pagination .btn-prev,
|
|
|
+ /deep/ .el-pagination .btn-next {
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 5px;
|
|
|
+ // height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ /deep/ .el-pagination .btn-prev {
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+ /deep/ .el-pagination .btn-prev:hover {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ // /deep/ .el-pagination .btn-next {
|
|
|
+ // padding-left: 5px;
|
|
|
+ // }
|
|
|
+ // /deep/ .el-pagination .btn-next:hover {
|
|
|
+ // color: #1890ff;
|
|
|
+ // }
|
|
|
+ /deep/ .el-pagination button:disabled {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /* 分页总数字体 */
|
|
|
+ /deep/ .el-pagination__total,
|
|
|
+ /deep/ .el-pagination__jump {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: FZLTHK;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ebebeb;
|
|
|
+ }
|
|
|
+ /deep/ .el-button--text {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ /deep/.infotext {
|
|
|
+ color: #43ebff !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+ .el-tooltip__popper {
|
|
|
+ max-width: 500px;
|
|
|
+ line-height: 180%;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+</style>
|
