table 上下左右 4根线的写法

<!--
* @description 重点查核人员表
!-->
<template>
<div class="keyCheckersTable">
<div class="tableZenHeader" ref="tableZenHeader">
<tableZen ref="tableZen"
disInnerInit
width="1500"
:styles="{border:0}"
:columns="columns"
@reload="tableZenReloadHandle">
</tableZen>
</div> <div :style="{height:innerHeight+'px' }" class="tableZenBody" ref="tableZenBody" @scroll="scrollHandle">
<div style="height: 500px; width: 1500px;">
123
</div>
</div>
</div>
</template> <script>
import columns from './columns'
import mockJson from './mockJson'
import buttonZen from '@/components/buttonZen'
import tableZen from '@/components/tableZen/tableZen' // 表格组件
import privateZenMixins from '@/view/biz/input/components/privateZenMixins.js'
export default {
name: 'keyCheckersTable',
mixins: [privateZenMixins],
components: {
tableZen,
buttonZen
},
props: {
diffHeight: {
type: Number,
default: 315
}
},
data () {
return {
innerHeight: 0,
mockJson,
columns
}
},
watch: {},
computed: {},
methods: {
hasScrollbar () {
this.consoleInfo('hasScrollbar', this.$refs.tableZenBody.scrollHeight, this.$refs.tableZenBody.offsetHeight)
// return this.$refs.tableZenBody.scrollWidth > this.$refs.tableZenBody.offsetWidth
return this.$refs.tableZenBody.scrollHeight > this.$refs.tableZenBody.offsetHeight
},
setScrollbar () {
this.$nextTick(() => {
this.setScrollbarExecute()
})
},
setScrollbarExecute () {
this.consoleInfo('this.hasScrollbar()', this.hasScrollbar())
if (this.hasScrollbar()) { // 如果有横向滚动条
this.$refs.tableZenHeader.style['overflow-y'] = 'scroll'
} else {
this.$refs.tableZenHeader.style['overflow-y'] = 'hidden'
}
},
scrollHandle () {
// this.consoleInfo('scrollHandle scrollLeft', this.$refs.tableZenBody.scrollLeft)
this.$refs.tableZenHeader.scrollLeft = this.$refs.tableZenBody.scrollLeft
},
init () {
this.calcHeight()
this.setScrollbar() window.addEventListener('resize', () => {
this.consoleInfo('resize')
this.calcHeight()
this.setScrollbar()
})
},
calcHeight () {
this.innerHeight = window.innerHeight - this.diffHeight
// this.consoleInfo('height', window.innerHeight, this.diffHeight, this.innerHeight)
},
tableZenReloadHandle (anyParams, callback) {
let ret = {
total: 100,
data: [{ a1: 'test' }]
}
callback(ret)
}
},
created () {},
mounted () {
this.init()
}
}
</script>
<style lang="less">
.keyCheckersTable { border-top: 1px solid #dcdee2;
border-left: 1px solid #dcdee2;
position: relative;
&:before {
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background-color: #dcdee2;
z-index: 1;
}
&:after {
content: '';
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #dcdee2;
z-index: 3;
}
.tableZenHeader {
overflow-x: hidden;
/*overflow-y: scroll;*/
}
.ivu-table-tip { display: none;}
.tableZenBody {
overflow: auto;
}
.ivu-table { margin-bottom: 0 !important;}
}
</style>

table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条的更多相关文章

  1. AntV F2 数据可视化填坑,图表横向滚动

    柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们 ...

  2. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  3. 获取UILabel上最后一个字符串的位置。获取文字长度和高度,自动换行

    //行的高度. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPat ...

  4. Swift4 - 动态计算UITableView中tableHeaderView的高度 - 获取子控件高度和宽度

    核心 : /// 获取 子控件高度 func sizeHeaderToFit(view:UIView) { view.setNeedsLayout() view.layoutIfNeeded() le ...

  5. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  6. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  7. js获取网页的各种高度

    原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...

  8. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  9. Android获取虚拟软键盘高度

    public static int getDpi(Context context) { int dpi = 0; WindowManager windowManager = (WindowManage ...

随机推荐

  1. Qt QImag图像保存、格式转换

    图像保存bool QImage::save(const QString &fileName, const char *format = Q_NULLPTR, int quality = -1) ...

  2. Nginx笔记总结九:Nginx日志配置

    ngx_http_log_module用来定义请求日志格式1. access_log指令 语法:   access_log path [format [buffer=size [flush=time] ...

  3. 隐私标签(Privacy.Tag):轻轻一贴,愉快拍照!

    用相机去捕捉精彩瞬间,用照片来记录生活足迹,并实时地与朋友们分享当下的心情,似乎已成为我们忙碌生活中最有趣的调味剂.但随着移动设备照相功能的日益完善,以及各大社交平台的不断兴起,很多时候,你是否也会有 ...

  4. 吴裕雄--天生自然KITTEN编程:移动与旋转

  5. python Select\Poll\Epoll异步IO与事件驱动

    参考:http://www.cnblogs.com/alex3714/articles/5248247.html 写服务器处理模型的程序时通常采用的模型: (1)每收到一个请求,创建一个新的进程,来处 ...

  6. linux查看端口号占用命令-netstat

    题记 经常会发现,很多时候我们在运行一些带有端口的程序时,程序经常会报端口被占用的问题,比如Tomcat 8080,端口起不来. 查看端口号 netstat 如果发现某个端口被占用后,可以用命令查看, ...

  7. 高效能Windows人士的N个习惯之一:启动篇

    接触电脑十多年,经历了各种折腾阶段,这几年开始沉静下来,不再追求花哨的界面与应用,只注重工作的效率,逐渐养成了一套自己的操作习惯,感觉不错,特撰文分享.标题借用了一下<高效能人士的七个习惯> ...

  8. [css-animation-101] 8 multiple transitions

    原文地址:css animation 101 #multiple-transitions 原文作者:Donovan Hutchinson 译者:JobbyM 到目前为止,我们已经讨论了一个过渡如何在一 ...

  9. 微软亚洲研究院的“哈利·波特”:Thomas Moscibroda

    在微软亚洲研究院,有一位名为Thomas Moscibroda的研究员几乎是无人不知.无人不晓,江湖人送外号"哈利·波特".Thomas认为他这么"红"是因为他 ...

  10. Python——6切片

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...