vue3 elementPlus table并滚动显示
效果类似
其实也没啥，代码部分，
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的，不好使，没有作用。
vue3 elementPlus table对tooltip格式修改
描述：将返回来的数据拼在一起 用逗号隔开
解决方法
<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(",");
};总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
