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