vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

mounted() {
　　　　 // 在mounted中监听表格scroll事件
    this.$refs.scrollTable.addEventListener( 'scroll',(event) => {
      this.adjustTable(event);
    });
  },
......
// target中的属性很多，可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度
adjustTable(event) {
      this.clientWidth = event.target.clientWidth;
    },

获取clientWidth，可以调整表头与列对齐（最后一列的宽度不设置）

<table class="cl-body-table" cellpadding="0" cellspacing="0">
    <thead :style="{'width':clientWidth+'px'}">
      <th style="width:8%"></th>
      <th class="cl-thead-th"></th>
    </thead>
    <tbody></tbody>
</table>
.......
// 表格滚动
　　table tbody {
　　　　display: block;
　　　　height: 495px;
　　　　overflow-y: auto;
　　　　overflow-x: hidden;
　　}
// 表头固定
　　table thead,
　　tbody tr {
　　　　display: table;
　　　　table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
　　　　width: 100%;
　　}
//列宽度
.cl-thead-th {
    &.is-not-last {
      width:13.142857143% // 最后一列不设宽度，才能表头与列对齐
    }
  }

网上最简单的表头与列对齐，由于我第一列的宽度与其他列宽度不同，导致始终不能对齐。因此我采用以下方法无效

// 表格滚动
table tbody {
  display: block;
  height: 495px;
  overflow-y: auto;
  overflow-x: hidden;
}
// 表头固定
table thead,
tbody tr {
  display: table;
  table-layout: fixed; /* 使用表格固定算法 必须配合上面一起使用 */
  width: 100%;
}
// 调整表头与列对齐
table thead {
  width:calc(100%-2em)
}

总结

以上所述是小编给大家介绍的vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • vue 实现左右拖拽元素并且不超过他的父元素的宽度

    vue 实现左右拖拽元素并且不超过他的父元素的宽度

    话不多说,先上需求图 需求:这是一个音频播放的组件,隐藏audio样式,用js调用脚本方法实现,目前功能基本实现,但是有个问题,图中共有一根绿色的begin线和红色的end线,使用这两根线切割音频,意思就是拖拽获取拖拽后的刻度传给后端,为此,去学习了一下拖拽, 上代码: html部分 <!--红绿线--> <div class="begin-end-line"> <img :src="lineGreen" alt=""

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

  • vue中实现滚动加载更多的示例

    vue中实现滚动加载更多的示例

    在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在vue会有一点麻烦,最近自己研究了一下,做了一个简单的demo,供大家参考: <template> <div> <ul> <li v-for="item in articles"> <h2>{{item.title}}</h2> <img :src="item.images" alt=""> &l

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • 在Vue中获取自定义属性方法:data-id的实例

    获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面 第二步:在标签上继续绑定:date-id = "item.id"属性 第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可 <template> <h2 class="left t-title" @cli

  • Vue中添加滚动事件设置的方法详解

    一.问题发现 在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件. <div @scroll='showOut'></div> 二.原因分析 暂无 三.解决办法 1.直接利用mousewheel事件替代scroll事件 <div @mousewheel='showOut'></div> mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • 在vue中获取wangeditor的html和text的操作

    目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <div id="editorElem" style="text-align:left"

  • vue中使用router全局守卫实现页面拦截的示例

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

随机推荐