::v-deep .table .el-table__body-wrapper {display: none; } // 重点注意这段样式.seamless-warp{height:200px;overflow: hidden; ::v-deep .table_scroll .el-table__header-wrapper {display: none; } } }</style>
<el-table-column label="故障类型" prop="troubleType" :show-overflow-tooltip="true"></el-table-column> <el-table-column label="点位编号" prop="pointNo" :show-overflow-tooltip="true"></el-table-column> <el-table-column label="点位名称" prop="pointName" :show-overflow-tooltip="true">...
@mousemove="mousemove" ref="tableRef" style="height: 300px; overflow: hidden" v-if="mouseMend" > <li v-for="(item, index) of villageList" @click="focusVillage(item)" :class="{ active: activeVillage === item.id }" :key="item" > <span class="index"> <img v-if="index ===...
创建表格并使用vue3-seamless-scroll组件: 在你的Vue组件模板中,使用el-table(假设你使用的是Element Plus库)来创建表格,并用vue3-seamless-scroll包裹它以实现滚动效果。vue <template> <div class="container"> <el-table :data="tableData" border style="width: 100%;"> <!-...
首先,确保你已经安装了Element-Table和seamless-scroll: bash复制代码 npm install element-table seamless-scroll 在你的Vue组件中,引入所需的依赖: javascript复制代码 import{ElTable,ElTableColumn}from'element-table'; import'seamless-scroll';// 引入seamless-scroll样式 在你的组件的setup()方法中,使用Element-...
el-table表格滚动可以通过定义两个table实现,第一个table展示标题,第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。 一、vue-seamless-scroll是什么? vue-seamless-scroll是一个为Vue.js设计的轻量级无缝滚动组件,它能实现元素列表在达到边界时平滑循环滚动的效果。支持自定义滚动方向、速度等,适用于...
/deep/ .el-table, /deep/ .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td { background-color: transparent; color:white } .seamless-warp{ ...
这里用的是el-table表格组件。 若直接将el-table表格插入到vue-seamless-scroll组件中,会导致el-table表格中的表头也会进行滚动,这不是想要的效果。 这里用两个el-table,一个保留表头部分,一个保留内容部分。保留内容部分的放入vue-seamless-scroll组件中进行无缝滚动。
代码实现中，你可能需要自定义表头并进行绝对定位。通过请求后端接口获取数据，计算属性用于处理数据。初始的样式可能存在适应性问题，需要调整布局以应对屏幕大小变化。虽然el-table与seamless-scroll可能存在兼容性问题，但使用两个el-table，分别处理表头和表体，可以解决部分问题。在遇到后端请求数据滚动问题时...
.el-table .cell { text-align: center; } .toptitle { width: 100%; display: flex; background-color: red; margin-bottom: 10px; border-bottom: 1px solid green; background-color: transparent; color: pink; } .item { width: 33.3%; ...