• 欢迎光临~

element table表头固定,高度自适应

开发技术 开发技术 2022-05-23 次浏览

element组件源地址:组件 | Element

在原组件中表头固定需要设置height高度,但是设置以后浏览器高度变化table不会变化,会出现一系列问题,就需要监听浏览器高度变化给height重新赋值。

关键代码

      <el-table
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
      >
      data() {
        return {
          clientHeight: document.documentElement.clientHeight,
          tableHeight:500,// 定义table高度
        }
      },
      mounted() {
        //  重置浏览器高度
        window.onresize = () => {
          this.clientHeight = document.documentElement.clientHeight;
        }
      },
      created() {
        //  初始值,自己定义
        this.tableHeight = this.clientHeight - 126
      },
      watch: {
        //  监听高度变化
        clientHeight(newValue, oldValue) {
          if(newValue) {
            this.getTableHeight()
          }
        }
      }
      methods:{
        // 防抖
        getTableHeight: debounce(function() {
          // 给table高度赋值
          this.tableHeight = this.clientHeight - 126
        }, 300),
      },

完整代码:

<template>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
      >
        <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-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    import {debounce} from "../../../../utils/utils";

    export default {
        name: "hotTable",
      data() {
        return {
          clientHeight: document.documentElement.clientHeight,
          tableHeight:500,// 定义table高度
          tableData: [{
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-08',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-06',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '2016-05-07',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
        }
      },
      mounted() {
        //  重置浏览器高度
        window.onresize = () => {
          this.clientHeight = document.documentElement.clientHeight;
        }
      },
      created() {
        //  初始值,自己定义
        this.tableHeight = this.clientHeight - 126
      },
      methods:{
        // 防抖
        getTableHeight: debounce(function() {
          // 给table高度赋值
          this.tableHeight = this.clientHeight - 126
        }, 300),
      },
      watch: {
        //  监听高度变化
        clientHeight(newValue, oldValue) {
          if(newValue) {
            this.getTableHeight()
          }
        }
      }
    }
</script>

<style lang="scss">
</style>
debounce防抖代码:
程序员灯塔
转载请注明原文链接:element table表头固定,高度自适应
喜欢 (0)