效果类似
其实也没啥,代码部分,
1、首先使用了element plus的table
<template> <div> <el-table ref="table1" :data="state.data" height="250" > <el-table-column prop="station" label="站点" width="90" align="center" /> <el-table-column prop="city" label="地市" width="55" align="center" /> <el-table-column prop="date" label="日期" width="75" align="center" /> <el-table-column prop="level" label="等级" width="70" align="center" /> </el-table> </div> </template>
2、设置定时器
<script setup> import { reactive, onMounted, ref } from "vue"; import { getWaterData as getDataApi } from "@/modules/api/home"; const state = reactive({ data: [], }); const table1 = ref(); onMounted(() => { getDataApi().then((data) => {//获取数据 state.data = data; scroll(table1.value.$refs.bodyWrapper);//设置滚动 }); }); </script> <script> //scroll方法不用对外,所以放在<script>里了 const scroll = (tableBody) => { let isScroll = true; const dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0]; //鼠标放上去,停止滚动;移开,继续滚动 dom1.addEventListener("mouseover", () => { isScroll = false; }); dom1.addEventListener("mouseout", () => { isScroll = true; }); setInterval(() => { if (isScroll) { dom1.scrollTop += 1; if (dom1.clientHeight + dom1.scrollTop == dom1.scrollHeight) { dom1.scrollTop = 0; } } }, 100); }; </script>
注意控制的dom是
table1.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0]
这是vue3中应用element plus 的table,网上许多教程 说控制this.$refs.table.bodyWrapper的,不好使,没有作用。
描述:将返回来的数据拼在一起 用逗号隔开
<el-table-column prop="airportInfos" label="管辖机场" > <template #default="scope" v-if="false"> {{ void (scope.row.temp = scope.row.airportInfos .map( (el) => el.ident + (el["designator"] === " " ? "" : "(" + el["designator"] + ")") ) .join(",")) }} <el-tooltip placement="top"> <template #content> {{ scope.row.temp }} </template> <div class="ellipsis diyname-ellipsis-width"> {{ scope.row.temp }} </div> </el-tooltip> </template> </el-table-column>
<el-table-column prop="airportInfos" label="管辖机场" :formatter="formatter" show-overflow-tooltip > </el-table-column> // 使用formatter const formatter = (row, column, cellValue) => { return cellValue .map( (el) => el.ident + (el["designator"] === " " ? "" : "(" + el["designator"] + ")") ) .join(","); };
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。