vue3應(yīng)用elementPlus table并滾動顯示問題

更新時(shí)間：2022年12月29日 15:56:26 作者：左直拳

這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動顯示問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3 elementPlus table并滾動顯示

效果類似

其實(shí)也沒啥，代碼部分，

1、首先使用了element plus的table

<template>
  <div>
    <el-table
      ref="table1"
      :data="state.data"
      height="250"
    >
      <el-table-column prop="station" label="站點(diǎn)" 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、設(shè)置定時(shí)器

<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) => {//獲取數(shù)據(jù)
    state.data = data;
    scroll(table1.value.$refs.bodyWrapper);//設(shè)置滾動
  });
});
</script>

<script>
//scroll方法不用對外，所以放在<script>里了
const scroll = (tableBody) => {
  let isScroll = true;

  const dom1 = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];

  //鼠標(biāo)放上去，停止?jié)L動；移開，繼續(xù)滾動
  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中應(yīng)用element plus 的table，網(wǎng)上許多教程說控制this.$refs.table.bodyWrapper的，不好使，沒有作用。

vue3 elementPlus table對tooltip格式修改

描述：將返回來的數(shù)據(jù)拼在一起用逗號隔開

解決方法

<el-table-column
?? ?prop="airportInfos"
?? ?label="管轄機(jī)場"
>
?? ?<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="管轄機(jī)場"
?? ?: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(",");
};