能不能在el-table上增加一个指令，根据剩余空间，自动设置最大高度，这样表格不会超出整个页面，滚动条只会出现在表格内部

[lxy545480918]

[PanJiaChen]

这应该给 element-ui 提吧。。。

[lxy545480918]

@PanJiaChen 大神，element-ui的效率没你高啊，这个指令可以更加好一点

[yuntao1997]

刚好写了一个，应该能满足你的要求

/**
 * 表格高度自适应，使用此功能必须先为表格设置初始值
 */
Vue.directive('table-height-adaptive', {

    /**
     * 
     * @param {*} el 
     * @param {*} binding 
     * binding.value 格式为 {
     *      table: $refs.table, //  表格对象
     *      topHeight: 140      //  表格顶边 距离顶部高度，默认值为  140
     *      footerHeight: 120   //  表格底部 距离底部高度，默认值为  120
     * }
     * @param {*} vnode 
     * @param {*} oldVnode 
     */
    update(el, binding, vnode, oldVnode) {
        let topHeight = binding.value.topHeight ? binding.value.topHeight : 140
        let footerHeight = binding.value.footerHeight ? binding.value.footerHeight : 120


        let table = binding.value.table


        let tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight;


        table.layout.setHeight(tableHeight)
        table.doLayout()

        // 监听窗口大小变化
        window.addEventListener("resize", () => {
            tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight
            table.layout.setHeight(tableHeight)
            table.doLayout()
        })
    }
})

用法如下：

 <el-table ..... **ref="table" height="50" v-table-height-adaptive="{table: $refs.table}"

[PanJiaChen]

@yuntao1997 欢迎pr

[yuntao1997]

@PanJiaChen 已提交 pr

demo预览：http://jsrun.net/a3XKp/edit

#1702

[lxy545480918]

@yuntao1997 流弊

[1amTheWind]

@yuntao1997 大神orz