首页 > 其他分享 >数据可视化 - 使用swiper制作滚动表格[vue3]

数据可视化 - 使用swiper制作滚动表格[vue3]

时间:2023-11-07 10:45:36浏览次数:35  
标签:12px align vue3 item 可视化 import table swiper

html部分

 1 <div class="scroll-table">
 2         <div class="scroll-table-header">
 3             <table class="scroll-table-header__table">
 4                 <colgroup>
 5                     <col style="width: 100px" />
 6                     <col style="width: 100px" />
 7                     <col />
 8                 </colgroup>
 9                 <thead class="">
10                     <tr>
11                         <th>问题类型</th>
12                         <th>标题</th>
13                         <th>公司名称</th>
14                         <th>状态</th>
15                         <th>领导姓名</th>
16                     </tr>
17                 </thead>
18             </table>
19         </div>
20         <div class="scroll-table-body">
21             <swiper
22                 :direction="'vertical'"
23                 :modules="modules"
24                 :slidesPerView="4"
25                 :autoplay="{
26                     delay: 2500,
27                     disableOnInteraction: false,
28             }"
29             style="height: 240px"
30             >
31                 <swiper-slide v-for="i in 12" :key="i">
32                     <td style="width: 100px">item</td>
33                         <td style="width: 100px">item</td>
34                         <td>item</td>
35                 </swiper-slide>
36             </swiper>
37         </div>
38     </div>

 

js 部分 

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        return {
            modules: [Autoplay],
        };
    },
};
</script>

 

css 部分

.scroll-table {
        &-header {
            table {
                table-layout: fixed;
                width: 100%;

                th {
                    text-align: start;
                    padding: 8px 12px;
                }
            }
        }

        &-body {
            .swiper {
                .swiper-wrapper {
                    display: table;
                    table-layout: fixed;
                    width: 100%;
                }

                .swiper-slide {
                    display: table-row;

                    td {
                        text-align: start;
                        padding: 8px 12px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }

 

标签:12px,align,vue3,item,可视化,import,table,swiper
From: https://www.cnblogs.com/deajax/p/17814491.html

相关文章

  • 正则可视化在线工具-更直观地理解和调试正则表达式的利器
    在工作和学习中,正则表达式是一种强大的工具,用于处理和分析文本数据。它可以帮助我们在海量数据中快速搜索、匹配和提取所需的信息。然而,正则表达式的语法复杂,很多人在编写和调试时可能会遇到困难。为了解决这个问题,我决定自己编写一个正则工具。这个工具旨在提供一个直观且用户友......
  • vue 2 升级vue3 前端老白
    vue2升级vue3前端老白原文链接:Vue3已经发布,而Vue2到Vue3的升级需要一些注意点。本文将介绍Vue2升级到Vue3的具体步骤,让您在升级中无后顾之忧。首先,我们需要升级VueCLI到4.x。在升级前,我们需要备份项目代码,以防出现意外情况。接着,我们需要在命令行中输入以下命令:npminst......
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局......
  • uniApp:使用vue3+Vite4+pinia+sass技术栈构建(02)-封装api请求
    前言在纯vue3开发的时候,使用axios进行api请求,但在uniapp中还需要安装axios的适配器uniapp-axios-adapter,否则小程序或者app请求不兼容。文档地址uniapp-axios-adapter-DCloud插件市场但在这里我们不使用axios,而是使用uniapp提供的请求方法uni.request进行封装。uni.request方......
  • 基于[email protected]的Vue3 PDF在线预览
    目录认识vue3-pdf-app安装vue3-pdf-app代码子组件封装:PdfView.vue父组件调用:index.vue中文配置文件viewer.properties本文参考来自于CSDN作者theMuseCatcher《Vue3PDF预览(vue3-pdf-app)》认识vue3-pdf-appvue3-pdf-app的npm官方链接点我访问vue3-pdf-app的github仓......
  • 综合布线可视化管理系统价值分析
    传统综合布线管理,全部依靠手工登记,利用标签标示线缆,利用文档资料记录链路的连接和变更,高度依赖网络管理员的管理能力,维护效率低下。同时,网络接入故障和非法接入难以及时发现。在以往的文章中小编一直强调这种传统的纸质记录方式势必会被淘汰,因为在信息化和数字化快速发展的今天,这种......
  • R语言群组变量选择、组惩罚group lasso套索模型预测分析新生儿出生体重风险因素数据和
    原文链接:http://tecdat.cn/?p=25158原文出处:拓端数据部落公众号 本文拟合具有分组惩罚的线性回归、GLM和Cox回归模型的正则化路径。这包括组选择方法,如组lasso套索、组MCP和组SCAD,以及双级选择方法,如组指数lasso、组MCP。还提供了进行交叉验证以及拟合后可视化、总结和预测的实......
  • vue3.0 + ts 实现上传工厂(oss与cos)
    概述将上传基类命名为MOS(MineObjectStorage)mos.ts代码import{MosType}from'./mosConfig'import{Loading}from'../loading'import{typeBinaryFile,typeMosFile}from'./fileUtil'importtype{PathTemplate}from'./pathTempla......
  • 部署Docker可视化管理工具docker.ui
    "DockerUI"这个术语在正式的Docker官方文档中并没有明确定义。然而,我们可以将其解释为用户界面(UI),用于管理和监控Docker容器和镜像。通常情况下,Docker的操作是通过命令行界面(CLI)进行的,但也存在一些第三方工具和平台,提供了图形化的用户界面来简化Docker的使用。这些Docke......
  • 如何搭建园区3d可视化大屏
    搭建园区3D可视化大屏需要考虑多个方面,包括硬件设备、数据源获取、软件工具和可视化设计。以下是一个详细的步骤指南,帮助您了解如何搭建园区3D可视化大屏。1.硬件设备选择:-显示屏幕:选择适合您需求的大屏幕显示器或投影仪,并确保其分辨率和尺寸能够满足您的需求。-计算机:选择......