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

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>