elementui横向列表-写一个多个el-table同步垂直滚动并且表头与内容同步

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

以下是基于Vue.js和Element UI的实现示例代码elementui横向列表，同步多个el-table的垂直滚动，并同步表头和内容。

<template>
  <div>
    <div class="fixed-table">
      <el-table :data="tableData1" :header-cell-style="{ width: headerWidth1 + 'px' }"
                @header-scroll="handleHeaderScroll1" @default-scroll="handleContentScroll1">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="email" label="邮箱" />
      </el-table>
    </div>
    <div class="fixed-table">
      <el-table :data="tableData2" :header-cell-style="{ width: headerWidth2 + 'px' }"
                @header-scroll="handleHeaderScroll2" @default-scroll="handleContentScroll2">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="email" label="邮箱" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData1: [
        { name: '张三', age: 18, gender: '男', address: '北京市', email: 'zhangsan@example.com' },
        { name: '李四', age: 27, gender: '女', address: '上海市', email: 'lisi@example.com' },
        { name: '王五', age: 36, gender: '男', address: '广州市', email: 'wangwu@example.com' }
      ],
      tableData2: [
        { name: '赵六', age: 22, gender: '女', address: '深圳市', email: 'zhaoliu@example.com' },
        { name: '钱七', age: 31, gender: '男', address: '武汉市', email: 'qianqi@example.com' },
        { name: '孙八', age: 45, gender: '女', address: '南京市', email: 'sunba@example.com' }
      ],
      headerWidth1: 0,
      headerWidth2: 0,
      content1: null,
      content2: null
    }
  },
  methods: {
    handleHeaderScroll1({ scrollLeft }) {
      this.content1.scrollLeft = scrollLeft
    },
    handleHeaderScroll2({ scrollLeft }) {
      this.content2.scrollLeft = scrollLeft
    },
    handleContentScroll1({ scrollLeft }) {
      this.headerWidth1 = scrollLeft
    },
    handleContentScroll2({ scrollLeft }) {
      this.headerWidth2 = scrollLeft
    }
  },
  mounted() {
    this.content1 = this.$el.querySelector('.fixed-table .el-table__body-wrapper')
    this.content2 = this.$el.querySelectorAll('.fixed-table .el-table__body-wrapper')[1]
  }
}
</script>
<style>
.fixed-table {
  height: 300px;
  overflow-x: auto;
  margin-bottom: 20px;
}
</style>

此示例包含两个具有相同数据结构的 el-table 和两个用于垂直滚动的 div 容器。

首先在el-table中添加两个storm监听器：@header-scroll和@default-scrollelementui横向列表，分别用于点击表头的滚动滚动和内容的滚动滚动。

然后，在各自的风暴处理函数中，使用scrollLeft属性来同步标题和内容的垂直滚动位置。

同时，通过设置表头单元格长度和表头滚动距离，保证表头与内容的同步。

最后通过mounted钩子函数中获取内容滚动容器的引用，实现表头和内容的同步滚动。