zoukankan      html  css  js  c++  java
  • elementui的table与自适应高度

    element官方文档中的table高度都是用的

    height="250"

    来定义了table固定高度,实际中很多时候我们需要使表格来自适应某个div,所以height一般不能让它为一个固定高度,下面看代码

    <div ref="tableCot">
        <el-table
        :data="tableData"
        style=" 100%"
        :height="Height">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
      </el-table>
    </div>

    需要注意的是定义一个Height与高度绑定,然后是script中的操作

    在data里面先定义一个Height

    data(){
      return{
            Height:250
        }  
    }
    mounted () {
        const that = this
        window.onresize = () => {
          return (() => {
            let heightStyle = that.$refs.tableCot.offsetHeight
            that.Height = heightStyle
          })()
        }
      },
    created () {
        let that = this
        let heightStyle = that.$refs.tableCot.offsetHeight
        that.Height = heightStyle
      },

    就OK了这里监听的div变化是windows窗口的变化,如果某些操作会使tableCot大小发生变化,那需要在那个事件上加上

    let heightStyle = that.$refs.tableCot.offsetHeight
    this.Height = heightStyle
  • 相关阅读:
    浏览器内核中各个线程之间的关系
    Browser进程和浏览器内核(Renderer进程)的通信过程
    babel 的一些记录
    mac nvm install
    小程序云开发补充
    JavaScript 导学推荐
    网页切片
    初探响应式Web设计
    WEB ICON 的探讨
    [转载]CSS 创作指南(Beta)(css规范)
  • 原文地址:https://www.cnblogs.com/daicw/p/11926308.html
Copyright © 2011-2022 走看看