<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>
自定义表格,自动滚动(适用postcss-px-to-viewport 插件)
于 2022-04-27 13:57:24 首次发布