Vue 利用 extends 继承的方式修改 ElementUI

修改 el-table 的 max-height 不支持 vh 或者 %

el-table2.vue
<script>
    import { Table } from 'element-ui'
    import { parseHeight } from "element-ui/packages/table/src/util";
    export default {
        name: "el-table2.vue",
        extends: Table, // 最重要的继承
        computed: {
            // 重写 el-table 源码中的 fixedBodyHeight 方法
            fixedBodyHeight() {
                if (this.height) {
                    return {
                        height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
                    };
                } else if (this.maxHeight) {
                    let maxHeight = parseHeight(this.maxHeight);
                    if (typeof maxHeight === 'number') {
                        maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
                        if (this.showHeader) {
                            maxHeight -= this.layout.headerHeight;
                        }
                        maxHeight -= this.layout.footerHeight;
                        return {
                            'max-height': maxHeight + 'px'
                        };
                    }else if(maxHeight.match(/\d+(vh|%)/g)){
                        let resHeight = this.layout.scrollX ? `100% - ${this.layout.gutterWidth}px` : "100%";
                        if (this.showHeader) {
                            resHeight =`${resHeight} - ${this.layout.headerHeight}px`;
                        }
                        resHeight = `${resHeight} - ${this.layout.footerHeight}px`;
                        return {
                            'max-height': `calc(${resHeight})`
                        };
                    }
                }
                return {};
            },

        }
    }
</script>

<style scoped>
    .el-table{
        display: flex;
        flex-direction: column;
    }
    .el-table >>> .el-table__header-wrapper{
        flex-shrink: 0;
    }
    .el-table >>> .el-table__body-wrapper{
        flex-grow: 1;
    }
</style>

main.js

// 全局注册组件
import ElTable2 from './components/el-table2.vue'
Vue.component('el-table2', ElTable2)

使用

hello.vue

// 直接使用组件
<template>
    <el-table2></el-table2>
</template>