网站建设英文字体格式,学网站建设能赚钱吗,公众号转wordpress,建筑设计前景怎么样一、使用element-plus表格进行滚动#xff1a; 可以满足的需求#xff1a;表格一行一行竖向滚动#xff0c;类似走马灯。 不能满足的需求#xff1a;表格分页竖向滚动#xff0c;有翻页的效果。 代码#xff1a;
templateel-table:datatableData 可以满足的需求表格一行一行竖向滚动类似走马灯。 不能满足的需求表格分页竖向滚动有翻页的效果。 代码
templateel-table:datatableData:show-overflow-tooltiptrueclassalarmTableel-table-columntypeindexwidth134aligncenterlabel序号template #defaultscopespan classtext{{(scope.$index1)(currentPage-1)*(pageSize)}}/span/template/el-table-columnel-table-column propname label名称 alignlefttemplate #defaultscopespan classname-text{{scope.row.name}}/span/template/el-table-columnel-table-column propmoney label金钱 aligncenter //el-table
/template
script langts
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted } from vueexport default defineComponent({name: rank,setup () {// 表格的数据类型interface tableType {name: string;money: number;}const data reactive({tableData: [] as ArraytableType, // 表格的数据currentPage: 1, // 当前展示的页码pageSize: 6, // 当前表格一页展示多少条数据tableDom: {} as HTMLElement, // 表格内容的dom})let timeInterval: NodeJS.Timer // 定时器的对象let tableScroll ref(true) // 是否需要滚动onMounted(() {// 初始化表格的数据list()scrollTable()})onUnmounted(() {clearInterval(timeInterval)})// 初始化表格的数据const list () {let arr:ArraytableType []for(let i 0; i 28; i) {let randomData Math.floor(Math.random() * 100)let obj {name: 名称randomData,money: randomData}arr.push(obj)}data.tableData arr}// 表格的数据滚动const scrollTable () {nextTick(() {// 获取当前表格内容的domlet table document.getElementsByClassName(alarmTable)[0]data.tableDom (table.getElementsByClassName(el-scrollbar__wrap)[0])! as HTMLElement// 鼠标放在表格内容暂停滚动data.tableDom.addEventListener(mouseover, () {tableScroll.value false})// 鼠标移出表格内容继续滚动data.tableDom.addEventListener(mouseout, () {tableScroll.value true})// timeInterval setInterval(() {if (tableScroll.value) {// 每次内容滚动的距离data.tableDom.scrollTop 1if (data.tableDom.clientHeight data.tableDom.scrollTop data.tableDom.scrollHeight) {data.tableDom.scrollTop 0}}}, 10)})}return {...toRefs(data)}}
})
/script
style langscss scoped
.alarmTable {margin-top: 40px;height: 623px;overflow: hidden;scroll-behavior: smooth;
}
/style
style langscss.el-table, .el-table::before,.el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before {background: transparent!important;}.el-table th, .el-table__cell.cell {height: 88px;padding: 0;font-size: 28px;font-weight: 400;color: #FFFFFF;line-height: 88px!important;}.el-table thead {font-size: 28px;font-weight: 600;color: #fff!important;}.el-table tr{background: transparent!important;:nth-child(2n) {background: rgba(49, 250, 233, 0.1)!important;}}.el-table th.el-table__cell {height: 88px;padding: 0;background: rgba(237, 250, 49, 0.1)!important;}.el-table tr:hovertd {cursor: pointer;background-color: rgba(0,148,255,0.3) !important;}.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {border-bottom: none!important;}
/style效果 二、使用Swiper进行滚动 1、文档说明https://swiperjs.com/vue 2、下载swiper说明 高版本10.0.2引入 Autoplay 会报错所以我下载了7.4.1版本npm install swiper7.4.1 如果7.4.1版本不好用可以参考这个文章https://blog.csdn.net/qq_36131788/article/details/121083045 3、安装swiper成功后在 main.ts 文件中引入css import ‘swiper/css’ 代码
templatediv classswiper-componentsdiv classtheaddiv v-for(item,index) in theadData :keyindex classthead-tr{{ item }}/div/divswiper:slides-per-view1:autoplay{ delay: 2000, disableOnInteraction: false }:directionvertical:scrollbar{ draggable: false }:looptrue:modulesmodulesclassswiper-contentswiper-slide v-for(item, index) in tableData :keyindexdiv classswiper-item v-for(subItem, subIndex) in item :keysubIndexdiv classswiper-td{{ subItem.index }}/divdiv classswiper-td{{ subItem.name }}/divdiv classswiper-td{{ subItem.money }}/div/div/swiper-slide/swiper/div/templatescript langts
import { defineComponent, onMounted, reactive, toRefs } from vue
// 引入swiper核心和所需模块
import {Autoplay} from swiper
// 引入swiper所需要的组件
import { Swiper, SwiperSlide } from swiper/vueexport default defineComponent({name: SwiperComponents,components: {Swiper,SwiperSlide},setup () {// 表格的数据类型interface tableType {index: number | string;name: string;money: number;}const data reactive({tableData: [] as ArraytableType[], // 列表需要的数据modules: [Autoplay], // 这个是自动播放的重点没有这个不能自动播放slidesCount: 6, // 每次滑动的数据数量theadData: [序号, 名称, 金钱] // 表格表头})onMounted(() {init()})// 数据初始化const init () {// 首先拿到请求的数据let arr []for (let i 0; i 30; i) {const obj {index: i 1,name: 987654,money: Math.floor(Math.random() * 100)}arr.push(obj)}// 根据一页要展示的数量进行数据的处理for (let i 0; i arr.length; i data.slidesCount) {let obj arr.slice(i, i data.slidesCount)data.tableData.push(obj)}}return {...toRefs(data)}}
})
/scriptstyle langscss scoped.swiper-components {margin-top: 40px;.thead {display: flex;justify-content: space-between;background: rgba(49,150,250,0.1);padding: 24px 40px 24px 34px;-tr {font-size: 28px;font-weight: 600;color: #FFFFFF;line-height: 40px;}}.swiper-content {height: 528px;.swiper-item {display: flex;justify-content: space-between;:nth-child(2n) {background: rgba(49,150,250,0.1);}}.swiper-td {padding: 24px 0;font-size: 28px;font-weight: 400;color: #FFFFFF;line-height: 40px;:first-child {width: 134px;text-align: center;}:last-child {width: 140px;margin-right: 40px;text-align: center;}}}}/style
效果
