vue中el-table两个表尾合计行联动同步滚动条实例代码

目录
  • 问题描述
  • 效果图
  • 思路
  • 完整代码
  • 总结

问题描述

最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据。

效果图

我们先看一下效果图

思路

获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离

官方文档:developer.mozilla.org/zh-CN/docs/…

滚动容器(审查元素即可得知):

完整代码

自己演示的话,直接复制粘贴即可,代码中包含注释

<template>
  <div class="kkk">
    <div class="myWrap">
      <el-table
        ref="one"
        :data="tableBody"
        border
        :header-cell-style="{
          background: '#FAFAFA',
          color: '#333333',
          fontWeight: 'bold',
          fontSize: '14px',
        }"
        show-summary
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column
          prop="bookType"
          label="人物隶属"
          width="100"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="zhifubao" label="支付宝" width="160">
        </el-table-column>
        <el-table-column prop="weixin" label="微信" width="160">
        </el-table-column>
        <el-table-column prop="jingdong" label="京东" width="160">
        </el-table-column>
        <el-table-column prop="yunshanfu" label="云闪付" width="160">
        </el-table-column>
        <el-table-column prop="suning" label="苏宁" width="160">
        </el-table-column>
        <el-table-column prop="lakala" label="拉卡拉" width="160">
        </el-table-column>
      </el-table>
      <el-table
        ref="two"
        :data="tableBody2"
        border
        show-summary
        :show-header="false"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column
          prop="bookType"
          label="业务类型"
          width="100"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="zhifubao" label="支付宝" width="160">
        </el-table-column>
        <el-table-column prop="weixin" label="微信" width="160">
        </el-table-column>
        <el-table-column prop="jingdong" label="京东" width="160">
        </el-table-column>
        <el-table-column prop="yunshanfu" label="云闪付" width="160">
        </el-table-column>
        <el-table-column prop="suning" label="苏宁" width="160">
        </el-table-column>
        <el-table-column prop="lakala" label="拉卡拉" width="160">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// cnpm i lodash --save
import _ from "lodash";
export default {
  data() {
    return {
      tableBody: [
        {
          bookType: "西游记",
          name: "孙悟空",
          zhifubao: 1,
          weixin: 2,
          jingdong: 3,
          yunshanfu: 4,
          suning: 5,
          lakala: 6,
        },
        {
          bookType: "西游记",
          name: "猪八戒",
          zhifubao: 6,
          weixin: 5,
          jingdong: 4,
          yunshanfu: 3,
          suning: 2,
          lakala: 1,
        },
      ],
      tableBody2: [
        {
          bookType: "三国演义",
          name: "刘备",
          zhifubao: 2,
          weixin: 2,
          jingdong: 2,
          yunshanfu: 2,
          suning: 2,
          lakala: 2,
        },
        {
          bookType: "三国演义",
          name: "猪八戒",
          zhifubao: 3,
          weixin: 3,
          jingdong: 3,
          yunshanfu: 3,
          suning: 3,
          lakala: 3,
        },
      ],
    };
  },
  mounted() {
    // 1. 初始化的时候,设置横向滚动规则
    this.setScrollRule();
  },
  methods: {
    setScrollRule() {
      let that = this; // 存一份this便于取用
      this.one = this.$refs.one.bodyWrapper; // 获取带有滚动条的dom元素,注意饿了么UI的el-table的横向滚动条是设置在类名为
      this.two = this.$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 这个dom上。审查元素可知
      console.log("滚动条dom容器", this.one);
      // 2. 绑定滚动事件,顺带加上一个节流函数吧,也算是性能优化
      this.one.addEventListener(
        "scroll",
        _.throttle(
          function () {
            that.fn1(); // 85毫秒触发一次吧
          },
          85,
          {
            leading: true, //指定调用在节流开始前
            trailing: false, //指定调用在节流结束后,
          }
        )
      );
      // 同上...
      this.two.addEventListener(
        "scroll",
        _.throttle(
          function () {
            that.fn2();
          },
          85,
          {
            leading: true,
            trailing: false,
          }
        )
      );
    },
    // 3. 通过Element.scrollLeft属性 可以读取或设置元素滚动条到元素左边的距离
    fn1() {
      console.log("滚动条一 移动多少?", this.one.scrollLeft);
      this.two.scrollLeft = this.one.scrollLeft;
      /**
       * 加了节流函数以后,就会出现当我们滑动过快的时候,远小于定义节流时间所触发的间隔
       * 就会出现距离不准确问题,所以再加一个延时定时器重新更正(更新一下位置)
       * */
      setTimeout(() => {
        this.two.scrollLeft = this.one.scrollLeft; // api文档详情见mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft
      }, 120);
    },
    // 同上...
    fn2() {
      console.log("滚动条二 移动多少?", this.two.scrollLeft);
      this.one.scrollLeft = this.two.scrollLeft;
      setTimeout(() => {
        this.one.scrollLeft = this.two.scrollLeft;
      }, 120);
    },
  },
  beforeDestroy() {
    // 移除事件监听
    this.one.removeEventListener("scroll", this.fn1);
    this.one.removeEventListener("scroll", this.fn2);
  },
};
</script>

总结

到此这篇关于vue中el-table两个表尾合计行联动同步滚动条的文章就介绍到这了,更多相关vue el-table联动同步滚动条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • element的el-table中记录滚动条位置的示例代码

    场景重现:在项目中使用了keep-alive来缓存组件,且使用element中的table列表,但在项目中是对table进行了二次封装,跟页码合在了一起.按照网上的直接对scrollTop赋值,赋值失败了,还要加上setTimeout才能成功,虽然实现了功能,但是不知道原因,可以的话希望有人能解答. 废话少说,直接赋上代码. <template> <div class="table"> <el-table ref="table">

  • vue中el-table两个表尾合计行联动同步滚动条实例代码

    目录 问题描述 效果图 思路 完整代码 总结 问题描述 最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据. 效果图 我们先看一下效果图 思路 获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离 官方文档:developer.mozilla.org/zh-CN/docs/… 滚动容器(审查元素即可得知): 完整代码 自己演示的话,直接复制粘贴即可,代码中包含注释 <templ

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • elementUi 中table表尾插入行的实例

    目录 elementUi table表尾插入行 element table 自定义表尾 先看最终实现的效果 实现过程 elementUi table表尾插入行 <template> <div> <el-table stripe class="jx-table" :data="tableData" border ref="table" style="width: 100%"> <el-t

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • 使用vue中的混入mixin优化表单验证插件问题

    这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷.自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是提高了很多. 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题,主要针对的是插件开发本身存在的问题.下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名,比较麻烦. 必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验,提交函数必须

  • 解决在Vue中使用axios用form表单出现的问题

    vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式 一,应用/ X WWW的窗体-urlencoded 这应该是最常见的后编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以用$ _ POST ["钥匙"]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离 app.post("/server&q

  • 一次在vue中使用post进行excel表下载的实战记录

    目录 一.一般大家下载excel都是使用get方法,直接点击下载 二.vue用post下载excel表 三.下面是具体的实现 3.1 post的封装 3.2 请求的方法 3.3 download下载方法的封装 四.总结 一.一般大家下载excel都是使用get方法,直接点击下载 就像这样,我就不多说了,大家应该都可以的啦 ‍♀️ <!-- 导出提示框 --> <Modal title="导出" :show.sync="exportVisible"

  • Mysql中 show table status 获取表信息的方法

    使用方法 mysql>show table status; mysql>show table status like 'esf_seller_history'\G; mysql>show table status like 'esf_%'\G; 样例: mysql>show table status like 'esf_seller_history'\G; 1.Name 表名称 2.Engine: 表的存储引擎 3.Version: 版本 4.Row_format 行格式.对于My

  • vue中filters 传入两个参数 / 使用两个filters的实现方法

    先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数 <van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col> 使用两个filters <van-tag plain :color="item.CreateTime(参数)|formatVisitDate(filters方法)|formatVisitDateColor(filters方法)">{{item.C

  • vue 中 elment-ui table合并上下两行相同数据单元格

    html : <el-table :header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" >

随机推荐