<template>
<div class="swiper-table-box">
<table class="box-table-th" :style="{ height:props.height_bt}" cellpadding="0" cellspacing="0">
<tr>
<td v-for="(item, index) in props.table_th" :key="index" :style="{ width: item.width }">
{{ item.name }}
</td>
</tr>
</table>
<div class="box-table-tr" :style="{height: height_content}">
<table cellspacing="0" cellpadding="0" style="border-collapse: separate; border-spacing: 0 6px">
<tr v-for="(item, index) in props.datas" :key="index">
<td v-for="(option, k) in props.table_th" :key="k" :style="{ width: option.width }" :title="item[option.value]">
<span>{{ item[option.value] }}</span>
</td>
</tr>
</table>
<!-- <p class="box-tips flex-row null-data">暂无数据</p> -->
</div>
</div>
</template>
<script setup>
import { ref, onMounted, markRaw,getCurrentInstance} from 'vue'
const props = defineProps({
timer: {
type: String,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return null;
},
},
table_th: {
type: Array,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return [
{name:"c才",width:'50px',value:'ss'},
{name:"6",width:'50px',value:'dd'},
{name:"7",width:'50px',value:'bb'},
{name:"8",width:'50px',value:'zz'},
];
},
},
datas: {
type: Array,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return [
{ss:"我是谁",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁",dd:"6666",bb:7777,zz:8888},
{ss:"我是谁",dd:"6666",bb:7777,zz:8888},
];
},
},
height_bt: {
type: String,
default: '36px',
},
height_content: {
type: String,
default: 'calc(100% - 40px)',
},
})
const {proxy} = getCurrentInstance();
const vCarousel = {
// update: function (el,binding) {
// clearInterval(binding.value.that.$store.state[binding.value.timer]);
// binding.value.that.$store.state[binding.value.timer]= setInterval(()=>{
// el.scrollTop++
// if ((el.scrollTop+el.offsetHeight)>=el.scrollHeight) {
// el.scrollTop=0
// }
// },50)
// el.onmouseenter=function(){
// clearInterval(binding.value.that.$store.state[binding.value.timer])
// },
// el.onmouseleave=function(){
// clearInterval(binding.value.that.$store.state[binding.value.timer])
// binding.value.that.$store.state[binding.value.timer]= setInterval(()=>{
// if (el.scrollTop+el.offsetHeight>=el.scrollHeight) {
// el.scrollTop=0
// }
// el.scrollTop++
// },50)
// }
// }
}
</script>
<style lang="scss">
.swiper-table-box {
height: 100%;
box-sizing: border-box;
padding: 8px 20px 0 20px;
.box-table-th {
width: 100%;
background: url('/image/index/th_bg.png') no-repeat;
background-size: 100% 100%;
// margin-top:4px;
tr td {
color: #999;
font-weight: 700;
text-align: center;
line-height: 36px;
}
}
.box-table-tr {
width: 100%;
overflow: auto;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
table {
width: 100%;
table-layout: fixed;
}
tr {
background: url('/image/index/tr_bg.png') no-repeat;
background-size: 100% 100%;
// margin-bottom:4px;
height: 28px;
line-height: 28px;
// display: inline-block;
// width: 100%;
td {
width: 20%;
font-size: 14px;
padding: 2% 0;
color: #d2e7ff;
text-align: center;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&:hover td {
background-color: rgba(47, 89, 155, 0.5);
}
}
.bg-olor-tr {
background: rgba(7, 52, 95, 0.5);
}
}
}
.box-tips {
height: 100%;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
/* 告警颜色 */
.alert_border {
border-radius: 3px;
padding: 0 8px;
display: inline;
}
.alert_red {
color: #f07f6e !important;
}
.alert_yellow {
color: #df9428 !important;
}
.alert_blue {
color: #29d9db !important;
}
.alert_green {
color: #34c470 !important;
}
.alert_border_blue {
border: 1px solid #29d9db !important;
}
.alert_border_red {
border: 1px solid #d23f51 !important;
}
.alert_border_yellow {
border: 1px solid #df9428 !important;
}
.alert_border_white {
border: 1px solid #fff;
padding: 1px 8px;
border-radius: 5px;
}
</style>
https://blog.csdn.net/zxczero/article/details/125613915?spm=1001.2014.3001.5502