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

news2024/11/18 23:32:31

效果图:

代码实现:

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-table
     ref="tableRef"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="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.offsetWidth
        const scrollLeft = tableEl.scrollLeft
        const scrollWidth = tableEl.scrollWidth
        if(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.coloradmin.cn/o/1241778.html

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

相关文章

OpenGL YUV 和 RGB 图像相互转换出现的偏色问题怎么解决?

未经作者(微信ID:Byte-Flow)允许,禁止转载 文章首发于公众号:字节流动 早上知识星球里的一位同学,遇到 yuv2rgb 偏色问题,这个问题比较典型,今天展开说一下。 省流版 首先 yuv2rgb 和 rgb2yuv 之间的转换要基于相同的标准,转换使用不同的标准肯定会引起偏色,常见的…

监控员工上网有什么软件丨三款好用的员工上网管理软件推荐

监控员工上网行为是企业管理中不可或缺的一部分&#xff0c;因此&#xff0c;选择一款好的监控员工上网的软件至关重要。目前市场上存在多种监控员工上网的软件&#xff0c;它们具有各种特点和功能&#xff0c;但企业需要仔细评估和选择。 一、域之盾软件 这是一款优秀的监控员…

数据结构-leetcode(设计循环队列)

1.学习内容&#xff1a; 今天 我们讲解一道能够很好的总结所学队列知识的题目---设计循环队列 622. 设计循环队列 - 力扣&#xff08;LeetCode&#xff09; 2.题目描述&#xff1a; 让我们设计一个队列 要求是循环的 这和我们的双向链表有些类似 让我们按要求设计出这些相对…

【C++】特殊类设计 {不能被拷贝的类;只能在堆上创建的类;只能在栈上创建的类;不能被继承的类;单例模式:懒汉模式,饿汉模式}

一、不能被拷贝的类 设计思路&#xff1a; 拷贝只会发生在两个场景中&#xff1a;拷贝构造和赋值重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造以及赋值重载即可。 C98方案&#xff1a; 将拷贝构造与赋值重载只声明不定义&#xff0c;并…

重生奇迹mu迹辅助什么好

主流辅助一号选手&#xff1a;弓箭手 智弓作为最老、最有资历的辅助职业&#xff0c;一直都是各类玩家的首要选择。因为智力MM提供的辅助能力都是最基础、最有效、最直观的辅助。能够减少玩家对于装备的渴求度&#xff0c;直接提升人物的攻防&#xff0c;大大降低了玩家升级打…

当当网获得dangdang商品详情商品列表API 测试请求入口

item_get-获得dangdang商品详情 获取商品详情 item_search-按关键字搜索dangdang商品 获取商品列表 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请…

单片机调试技巧--栈回溯

在启动文件中修改 IMPORT rt_hw_hard_fault_exceptionEXPORT HardFault_Handler HardFault_Handler PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE EQMRSEQ r0, msp ; [2]0 > Z1, get fault context from h…

强化学习------贝尔曼方程

目录 前言基础知识马尔可夫决策过程 (Markov decision process, MDP)回报(Return)折扣回报(Discounted Return) State Value&#xff08;状态价值函数&#xff09;贝尔曼方程的推导贝尔曼方程的矩阵形式Action Value&#xff08;动作价值函数&#xff09;贝尔曼最优公式 前言 …

Python——练习2

Python 练习一练习二练习三 练习一 (回文素数)回文素数是指一个数既是素数又是回文数。例如&#xff0c;131 既是素数也是回文数。数字313和717都是如此。编写程序显示前 100 个回文素数。每行显示10个数字&#xff0c;并且准确对齐如下所示。 2 3 5 7 11 …

网络安全等级保护收费标准?

不同省份价格会略有不同&#xff0c;二级等保一般不低于5万元;三级等保不低于9万元&#xff0c;个别省份也可能7万也能办理&#xff0c;根据企业实际情况和省市选定的代理机构确定。 等级保护二级? 第二级等保是指信息系统受到破坏后&#xff0c;会对公民、法人和其他组织的合…

pip安装python包到指定python版本下

python -m pip install 包名1.命令行进入到指定python安装目录。比如我电脑上有python3.8也有python3.9。准备给python3.9安装指定的包

企业软件定制开发有哪些优势?|app小程序网站搭建

企业软件定制开发有哪些优势&#xff1f;|app小程序网站搭建 企业软件定制开发是一种根据企业特定需求开发定制化软件的服务。相比于购买现成的软件产品&#xff0c;企业软件定制开发具有许多优势。 首先&#xff0c;企业软件定制开发可以满足企业独特需求。每个企业都有自己独…

redis-cluster集群

1.redis-cluster集群 redis3.0引入的分布式存储方案 集群由多个node节点组成&#xff0c;redis数据分布在这些节点之中。 在集群之中分为主节点和从节点 集群模式当中&#xff0c;主从一一对应&#xff0c;数据写入和读取与主从模式一样&#xff0c;主负责写&#xff0c;从…

ui5使用echart

相关的代码已经发布到github上。 展示下相关的实现功能 1、柱状图-1 2、柱状图-2 3.折线图 4.饼状图 如何使用&#xff1a; 使用git clone项目到本地 git clone https://github.com/linhuang0405/com.joker.Zechart找到index.html。在vscode里右键选择Open with Live Serve…

数字化转型过程中面临最大的问题是什么?如何借助数字化工具实现快速转型?

在科技快速发展的时代&#xff0c;数字化转型已经成为企业的重要战略。当企业努力适应数字化时代并取得成功时&#xff0c;他们可能会面临各种必须有效应对的挑战。   数字化转型不仅仅是将新技术应用到企业的运营中&#xff0c;还需要对企业的运营方式、与客户的互动方式和价…

数据库数据恢复—SQLserver数据库中勒索病毒被加密的数据恢复案例

SQLserver数据库数据恢复环境&故障&#xff1a; 一台服务器上的SQLserver数据库被勒索病毒加密&#xff0c;无法正常使用。该服务器上部署有多个SQLserver数据库&#xff0c;其中有2个数据库及备份文件被加密&#xff0c;文件名被篡改&#xff0c;数据库无法使用。 SQL se…

智能优化算法 | Matlab实现金豺优化算法(GJO)(内含完整源码)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 智能优化算法 | Matlab实现金豺优化算法(GJO)(内含完整源码) 源码设计 %%clear clc close SearchAgents_no=30; % Number of search agents Max_iteration=1000

2023年03月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 小猫的程序如图所示,积木块的颜色与球的颜色一致。点击绿旗执行程序后,下列说法正确的是?( ) A:小猫一直在左右移动,嘴里一直说着“抓到了”。 B:小猫会碰到球,然后停止。…

某资产管理机构: IAST提升安全水平,保障资产管理水平稳健增长

某资产管理机构是国内首批成立的资产管理公司之一&#xff0c;坚持“科技金融”、“数字金融”战略&#xff0c;以客户为中心&#xff0c;聚焦用户体验与业务协同&#xff0c;着力推进营销数字化进程和大数据平台建设&#xff0c;助力资产管理高质量发展。 数字科技推动工作效率…

PHP 正则式 全能匹配URL(UBB)

PHP 正则式 全能匹配URL&#xff08;UBB&#xff09; 语言&#xff1a;PHP 注明&#xff1a;正则式 无语言限制&#xff08;js、PHP、JSP、ASP、VB、.net、C#...&#xff09;一切皆可。 简介&#xff1a;PHP UBB 正则式 全能匹配URL 自动加超级链接。网上找了很多都不匹配或…