iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3应用elementPlustable并滚动显示问题
  • 525
分享到

vue3应用elementPlustable并滚动显示问题

vue3elementPlustablevue3应用elementPluselementPlustable滚动显示 2022-12-29 18:12:28 525人浏览 八月长安
摘要

目录vue3 elementPlus table并滚动显示Vue3 elementPlus table对tooltip格式修改解决方法总结vue3 elementPlus table

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(",");
};

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue3应用elementPlustable并滚动显示问题

本文链接: https://www.lsjlt.com/news/176232.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作