<template>
? <div
? ? class="tables"
? ? :style="{
? ? ? marginTop: marginTop,
? ? ? marginLeft: marginLeft,
? ? ? marginBottom: marginBottom,
? ? }"
? >
? ? <div class="div-select">
? ? ? <span
? ? ? ? v-for="(item, index) in tabList"
? ? ? ? :key="index"
? ? ? ? :class="[activeFlag == index ? 'active' : '']"
? ? ? ? @click="tabHandle(index)"
? ? ? ? >{{ item }}</span
? ? ? >
? ? </div>
? ? <div class="div-table">
? ? ? <div class="table-header">
? ? ? ? <div v-for="(item, index) in headerList" :key="index">
? ? ? ? ? {{ item.label }}
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="table-body" v-if="tableList && tableList.length">
? ? ? ? <div
? ? ? ? ? ref="content"
? ? ? ? ? class="table-body-content"
? ? ? ? ? :style="{ transform: 'translateY(' + leftWidth + 'px)' }"
? ? ? ? >
? ? ? ? ? <div
? ? ? ? ? ? :class="['table-tr', index % 2 == 0 ? '' : 'back']"
? ? ? ? ? ? v-for="(item, index) in tableList"
? ? ? ? ? ? :key="index"
? ? ? ? ? >
? ? ? ? ? ? <div v-for="ele in headerList" :key="ele.props">
? ? ? ? ? ? ? <div v-if="ele.props == 'name'">
? ? ? ? ? ? ? ? <span
? ? ? ? ? ? ? ? ? v-if="item.category == 1"
? ? ? ? ? ? ? ? ? class="iconfont"
? ? ? ? ? ? ? ? ? style="color: #e74e4e; font-size: 14px"
? ? ? ? ? ? ? ? ? > {{ item.categoryDesc }}</span
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <span
? ? ? ? ? ? ? ? ? v-if="item.category == 2"
? ? ? ? ? ? ? ? ? class="iconfont"
? ? ? ? ? ? ? ? ? style="color: #f8b62d; font-size: 14px"
? ? ? ? ? ? ? ? ? > {{ item.categoryDesc }}</span
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <span
? ? ? ? ? ? ? ? ? v-if="item.category == 5"
? ? ? ? ? ? ? ? ? class="iconfont"
? ? ? ? ? ? ? ? ? style="color: #8d6dff; font-size: 14px"
? ? ? ? ? ? ? ? ? > {{ item.categoryDesc }}</span
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <span>{{ item[item.props] }}</span>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div v-else :title="item[ele.props]">{{ item[ele.props] }}</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? <div ref="bodyBottom" class="table-tr-bottom"></div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="body-none" v-else>
? ? ? ? <img src="../assets/img/data-none.png" alt="" />
? ? ? </div>
? ? ? <div ref="tableBottom" class="table-body-bottom"></div>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? leftWidth: 0,
? ? ? activeFlag: 0,
? ? ? tableInterval: null,
? ? };
? },
? /*
? ? 模仿el-table封装
? ? props中的name是写死的
? ? 图标用到了iconfont
? ? css预编译stylus
? */
? props: {
? ? tabList: {
? ? ? type: Array,
? ? ? default: () => [],
? ? },
? ? headerList: {
? ? ? type: Array,
? ? ? default: () => [],
? ? },
? ? tableList: {
? ? ? type: Array,
? ? ? default: () => [],
? ? },
? ? marginTop: {
? ? ? type: String,
? ? ? default: "0px",
? ? },
? ? marginLeft: {
? ? ? type: String,
? ? ? default: "6px",
? ? },
? ? marginBottom: {
? ? ? type: String,
? ? ? default: "0px",
? ? },
? },
? methods: {
? ? tabHandle(index) {
? ? ? this.activeFlag = index;
? ? ? this.$emit("tabHandle", index);
? ? },
? ? outHandle() {
? ? ? if (this.tableInterval) {
? ? ? ? clearInterval(this.tableInterval);
? ? ? }
? ? ? this.tableInterval = setInterval(() => {
? ? ? ? let tableTop = this.$refs.tableBottom.getBoundingClientRect().top;
? ? ? ? let bodyTop = this.$refs.bodyBottom.getBoundingClientRect().top;
? ? ? ? this.leftWidth -= 1;
? ? ? ? if (bodyTop <= tableTop) {
? ? ? ? ? this.leftWidth = 0;
? ? ? ? }
? ? ? }, 100);
? ? },
? },
? mounted() {},
? watch: {
? ? tableList(newVal) {
? ? ? this.leftWidth = 0;
? ? ? if (newVal.length > 4) {
? ? ? ? this.outHandle();
? ? ? } else {
? ? ? ? if (this.tableInterval) {
? ? ? ? ? clearInterval(this.tableInterval);
? ? ? ? }
? ? ? }
? ? },
? },
? beforeDestroy() {
? ? clearInterval(this.tableInterval);
? },
};
</script>
<style lang="stylus" scoped>
.div-table {
? height: 200px;
? overflow: hidden;
? .table-header {
? ? display: flex;
? ? div {
? ? ? flex: 1;
? ? ? height: 32px;
? ? ? line-height: 32px;
? ? ? text-align: center;
? ? ? font-size: 14px;
? ? ? color: #29abe2;
? ? ? background: #012e62;
? ? }
? }
? .table-body {
? ? height: 168px;
? ? overflow: hidden;
? ? .table-body-content {
? ? ? .table-tr {
? ? ? ? display: flex;
? ? ? ? overflow: hidden;
? ? ? ? border-bottom: 1px solid #283d6f;
? ? ? ? div {
? ? ? ? ? flex: 1;
? ? ? ? ? padding: 0 10px;
? ? ? ? ? height: 40px;
? ? ? ? ? line-height: 40px;
? ? ? ? ? text-align: center;
? ? ? ? ? font-size: 12px;
? ? ? ? ? color: #99a5d7;
? ? ? ? ? overflow: hidden; /* 隐藏 */
? ? ? ? ? white-space: nowrap; /* 不换行 */
? ? ? ? ? text-overflow: ellipsis; /* 超出部分省略号 */
? ? ? ? }
? ? ? }
? ? ? .back {
? ? ? ? background: rgba(18, 38, 82, 0.7);
? ? ? }
? ? ? .table-tr-bottom {
? ? ? ? height: 1px;
? ? ? }
? ? }
? }
? .body-none {
? ? text-align: center;
? ? img {
? ? ? width: 100px;
? ? ? height: 100px;
? ? ? padding-top: 50px;
? ? }
? }
? .table-body-bottom {
? ? height: 1px;
? }
}
.div-select {
? margin-bottom: 16px;
? span {
? ? display: inline-block;
? ? border: 1px solid #8493c3;
? ? width: 70px;
? ? height: 20px;
? ? line-height: 20px;
? ? text-align: center;
? ? color: #8493c3;
? ? margin-right: 10px;
? ? cursor: pointer;
? }
? .active {
? ? background: #02d4ff;
? ? color: #fff;
? ? border: 0px;
? ? height: 22px;
? }
}
</style>
