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

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;
                    }
                }
            }
        }
    }

 

posted @ 2023-11-07 10:37  deajax  阅读(322)  评论(0)  编辑  收藏  举报