vue el-table (固定列+滚动列)【横向滚动条】确定滚动条是在列头还是列尾

效果图:

代码实现:

html:

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app" style="width:820px">
<template><el-tableref="tableRef":data="tableData"borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table>
</template>
</div>

css:

@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");

js:

var Main = {mounted(){this.$nextTick(() => {const tableEl = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper')tableEl.addEventListener('scroll', ()=>{const tableWidth = tableEl.offsetWidthconst scrollLeft = tableEl.scrollLeftconst scrollWidth = tableEl.scrollWidthif(scrollLeft === 0){console.log('已滚动到第一列')} else if(Math.round(scrollWidth-tableWidth) === Math.round(scrollLeft)){console.log('已滚动到最后一列')}})})},methods: {handleClick(row) {console.log(row);}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333}]}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】树如何定义 | 如何存储 | 实际应用

前言 如上图&#xff0c;A中的孩子的个数是不固定的。我们无法精确的每个不同的根结点有多少个孩子。所以并不能精确知道需要定义多少个孩子节点。 struct TreeNode {int val;struct TreeNode* child1;struct TreeNode* child2;struct TreeNode* child3;//...//这样显然是不能…

springboot 拦截器中使用@Value注解为null

拦截器中获取配置参数为null 代码如下&#xff1a; 解决方式一&#xff1a; 检查你的WebMvcConfigurer实现类&#xff0c;比如我的是CCBWebMvcConfig 将拦截器以bean的形式注入&#xff1a; 我之前的写法是new 一个放进去的&#xff0c;这种会导致Value为null AutowiredJSCCB…

2014年10月6日 Go生态洞察:Go在Google I/O和Gopher SummerFest的应用

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

《微信小程序开发从入门到实战》学习二十七

3.4 开发参与投票页面 3.4.2 借用伪造数据开发功能 为了便于开发&#xff0c;新建一个编译模式&#xff1a; 之前没看文章&#xff0c;每次都习惯性填完投票创建的信息提交再跳转看效果。好累。 添加变异模式开发真方便。 另外&#xff0c;点击提交后没跳转到投票页面&#…

xorm源码学习

文章目录 XORM源码浅析及实践ORMORM vs. SQLXORM软件架构 ORM 引擎 Engine——DBM*core.DB Golang&#xff1a;database/sql 源码基本结构连接复用&#xff0c;提高性能。增加数据库连接池数量连接管理 database/sql主要内容&#xff1a;sql.DB创建数据库连接sql.Open()DB.conn…

Spring——感谢尚硅谷官方文档

Spring——尚硅谷学习笔记 1 Spring简介&#x1f47e;1.1 Spring概述1.2 Spring Framework1.2.1 Spring Framework特性1.2.2 Spring Framework五大功能模块 2 IOC-IOC容器思想&#x1f47e;IOC容器思想IOC在Spring中的实现 3 IOC-基于XML文件管理Bean&#x1f47e;3.1 准备工作…

2023亚太杯数学建模A题思路 - 采果机器人的图像识别技术

# 1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有一个&#xff0c;全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…

数据库实验四 索引创建与管理操作

数据库实验四 索引创建与管理操作 一、实验目的二、设计性实验三、观察与思考 一、实验目的 (1) 理解索引的概念与类型。 (2) 掌握创建、更改、删除索引的方法。 (3) 掌握维护索引的方法。 二、设计性实验 在数据库job下创建worklnfo表。创建表的同时在id字段上创建名为inde…

【HarmonyOS】元服务卡片本地启动拉起加桌没问题,上架后拉起加桌时卡片展示异常

【关键字】 加桌选卡展示异常 、 2卡共用一个布局 、 代码混淆 【问题现象】 元服务卡片在本地启动拉起加桌时&#xff0c;多卡的选卡过程显示是没问题的。但是在上架后拉起加桌时&#xff0c;多卡的选卡过程卡片展示异常。 代码逻辑是通过创建卡片的时候判断卡片的尺寸大小…

数据结构与算法编程题13

设计算法将一个带头结点的单链表A分解为两个具有相同结构的链表B、C&#xff0c;其中B表的结点为A表中值小于零的结点&#xff0c;而C表的结点为A表中值大于零的结点&#xff08;链表A中的元素为非零整数&#xff0c;要求B、C表利用A表的结点&#xff09; for example: A -1 2 …

SpringBoot + 通义千问 + 自定义React组件,支持EventStream数据解析!

一、前言 大家好&#xff01;我是sum墨&#xff0c;一个一线的底层码农&#xff0c;平时喜欢研究和思考一些技术相关的问题并整理成文&#xff0c;限于本人水平&#xff0c;如果文章和代码有表述不当之处&#xff0c;还请不吝赐教。 最近ChatGPT非常受欢迎&#xff0c;尤其是…

virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…

安装第三方包报错 error: Microsoft Visual C++ 14.0 or greater is required——解决办法

1、问题描述 手动安装第三方软件时&#xff0c;可以使用setup.py&#xff0c;来安装已经下载的第三方包。一般文件下会存在setup&#xff0c;在所要安装库的目录下的cmd执行&#xff1a;python setup.py install报错&#xff1a;error: Microsoft Visual C 14.0 or greater i…

所有权成果输出(宗地基本信息表、界址标示表、界址签章表、界址点成果表、宗地图、界址说明表、调查审核表)

一、软件界面&#xff1a; 二、软件功能&#xff1a; 一、所有权成果要求(宗地基本信息表、界址标示表、界址签章表、界址点成果表、宗地图、界址说明表、调查审核表&#xff09; 1 不动产权籍调查表封面 &#xff08;1&#xff09;宗地&#xff08;海&#xff09;代码&…

基于element-plus定义表单配置化扩展表单按钮

文章目录 前言一、新增btn.vue组件二、使用总结如有启发&#xff0c;可点赞收藏哟~ 前言 在后台管理系统一般都存在列表查询&#xff0c;且可输入数据进行查询 基于element-plus定义表单配置化 新增按钮配置化 一、新增btn.vue组件 <template><template v-for&qu…

代码随想录算法训练营第四十二天【动态规划part04】 | 01背包、416. 分割等和子集

01背包问题 题目链接&#xff1a; 题目页面 求解思路&#xff1a; 确定dp数组及其下标含义&#xff1a;dp[i][j] 表示从下标为 [0] 到 [i] 的物品里任意选取&#xff0c;放进容量为j的背包&#xff0c;此时的价值总和最大值确定递推公式&#xff1a; 不放物品i&#xff0c;…

centos查看空间使用情况

查看磁盘使用空间 df -h 查看该目录下其他目录的大小 du -sh *

Unity中颜色空间Gamma与Linear

文章目录 前言一、人眼对光照的自适应1、光照强度与人眼所见的关系2、巧合的是&#xff0c;早期的电子脉冲显示屏也符合这条曲线3、这两条曲线都巧合的符合 y x^2.2^&#xff08;Gamma2.2空间&#xff09; 二、Gamma矫正1、没矫正前&#xff0c;人眼看电子脉冲显示屏&#xff…

事件溯源模式

概念解释 事件溯源&#xff08;Event Sourcing&#xff09;是一种设计模式&#xff0c;其核心思想是将系统的状态变化表示为一系列不可变的事件&#xff0c;并将这些事件存储在事件日志中。系统的当前状态可以通过重新应用&#xff08;回放&#xff09;这些事件来还原&#xf…