rt-sim-training-client/src/jmapNew/theme/ningbo_01/menusPlan/components/dataTable.vue

<template>
  <div v-if="show">
    <template v-if="maxmini">
      <div class="nav">
        <div v-show="config.showClose" class="cls-status" @click="touch('Close')"><span /></div>
        <div class="min-status" @click="touch('Minim')"><span /></div>
      </div>
      <el-table
        ref="table"
        :data="config.data"
        :highlight-current-row="config.highlightCurrentRow"
        :height="height"
        border
        @current-change="handleChange"
      >
        <template v-for="(item,index) in config.columns">
          <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" />
        </template>
      </el-table>
    </template>
    <template v-else>
      <div class="nav">
        <div class=" max-status" @click="touch('Maxim')"><span /></div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
	name: 'DataTable',
	props: {
		height: {
			type: Number,
			required: true
		},
		config: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			show: true,
			maxmini: true,
			touchStrategy: {
				'Close': [false, true],
				'Minim': [true, false],
				'Maxim': [true, true]
			}
		};
	},
	methods: {
		handleChange(row) {
			if (this.config.handleChange) {
				this.config.handleChange(row);
			}
		},
		setCurrentRow(row) {
			this.$refs.table.setCurrentRow(row);
		},
		touch(operate) {
			this.$nextTick(() => {
				[this.show, this.maxmini] = this.touchStrategy[operate];
				this.$emit('touch', this.maxmini);
			});
		}
	}
};
</script>

<style scoped rel="stylesheet/scss" lang="scss" >
    @import "src/styles/mixin.scss";
    $height: 20px;
    $width: 20px;

    .nav {
        display: table;
        float: right;
        width: 100%;
        color: #0000;
        background: -webkit-linear-gradient(#FDFDFE, #B1CBF3);
        background: -o-linear-gradient(#FDFDFE, #B1CBF3);
        background: -moz-linear-gradient(#FDFDFE, #B1CBF3);
        background: linear-gradient(#FDFDFE, #B1CBF3);
        border: 1px solid #B6BCCC !important;
        border-bottom: 2px solid #B6BCCC !important;
        list-style: none;
        height: $height;
        line-height: $height;
    }

    /deep/ {
        .el-table--border th.gutter {
            background: #EBEADB !important;
        }

        .el-table {
            overflow-y: hidden;
            width: 100%;

            th.is-leaf {
                padding: 0px 0;
                background: #EBEADB;
                border-right: none !important;
                border-left: 1px solid #D1CDBD !important;
                border-top: 1px solid #D1CDBD !important;
                border-bottom: 1px inset #D1CDBD !important;
                color: #000;

                .cell {
                    height: $height;
                    line-height: $height;
                }
            }

            td {
                padding: 0px 0;

                .cell {
                    height: $height;
                    line-height: $height;
                    font-size: smaller !important;
                }

            }

            .current-row>td {
                background: #316AC5 !important;
                color: #fff !important;
            }
        }

        .cls-status {
            float: right;
            width: 12px;
            height: 100%;
            line-height: 100%;
            margin-left: 5px;
            cursor: pointer;

            span {
                display: inline-block;
                content: '/';
                background: black;
                width: 2px;
                height: 12px;
                vertical-align: middle;
               transform: rotate(45deg);
            }

            span::after {
                display: block;
                content: '/';
                background: black;
                width: 2px;
                height: 12px;
               transform: rotate(-90deg);
            }
        }

        .min-status {
            float: right;
            width: 20px;
            height: 100%;
            line-height: 100%;
            cursor: pointer;

            span {
                display: inline-block;
                content: '-';
                background: black;
                width: 2px;
                height: 12px;
                vertical-align: middle;
               transform: rotate(-90deg);
            }
        }

        .max-status {
            float: right;
            width: 20px;
            height: 100%;
            line-height: 100%;
            cursor: pointer;

            span {
                display: inline-block;
                content: '';
                background: black;
                width: 2px;
                height: 12px;
                transform: rotate(0deg);
            }

            span::after {
                display: block;
                content: '';
                background: black;
                width: 2px;
                height: 12px;
               transform: rotate(90deg);
            }
        }
    }
</style>