Element-UI 优化

1.对话框

当打开的对话框页面元素众多，俨然一个子页面是，可以做2个优化：

• 优化项1：对话框去滚动，当对话框内容过多时，把滚动条控制在对话框内部，避免出现页面级的滚动条
• 优化项2：优化对话框标题样式，为其添加一个背景色，使之看上去更像一个iframe页面

实现思路：

• 把滚动条控制在对话框内部，要点在于给内容区域设定一个合适的高度，经测试，这个高度为：
  页面高度(100vh) - marign-top(15vh) - marign-bottom(50px) - 对话框标题高度(54px)
• 去除内容区默认的默认的padding
• 重置对话框标题背景色
• 如果页面元素不足以撑起整个容器，可以把提交按钮固定的底部，防止页面过于空旷

/* 重置对话框标题背景色 */
.el-dialog__header {
    background-color: #2c3e50 !important;
}
/* 重置对话框标题字体颜色 */
.el-dialog__header .el-dialog__title {
    color: #fff !important;
}
/* 去除内容区默认padding */
.el-dialog__body{
    padding:0 !important;
}

2.列宽自适应

无论是Element-UI中的table组件，还是专业vxe-table表格插件，都无法做到完美的列宽自适应，更不用说第三方插件。一切还得自己来，解决思路如下：

• 列的内容要素过多，这里只讨论纯本文渲染，可以注册一个全局过滤器对tableData进行计算，得到目标列最大宽度
• 表格列宽计算过程中，涉及到padding，最小宽度(兼顾表头)，最大宽度，这些都要考虑到
• 当表格数据更新时，过滤器可以实时设定el-table-column组件的width属性值，但是需要使用v-if指令对表格进行重置才能生效

//过滤器代码
//闭包  传入当前环境的this
(function (global, factory) {
    //1.先判断当前环境是否支持CommonJS规范(node.js)
    if (typeof exports == 'object' && typeof module !== 'undefined') {
        console.log('CommonJS规范')
        module.exports = factory()
    } else if (typeof define == 'function' && define.amd) {//2.再判断是否支持AMD规范(require.js)
        console.log('AMD规范')
        define(factory)
    } else {
        console.log('script标签引入')
        if(this.Vue){
            //自动执行安装
            Vue.use(factory())
        }
    }
}(this, function () {
    return {
        //插件安装方法
        install: function (Vue) {
            if (!Vue) {
                return
            }

            //过滤器 求出表格列的最大宽度
            Vue.filter('maxWidthForColumn', function (tableData = [], prop = '', font_size = 12, padding = 10, min = 100,max = 0,) {
                //计算字符串的占位宽度
                function getTextWidth(str = '', font_size = 12) {
                    const dom = document.createElement('span')
                    dom.style.display = 'inline-block'
                    dom.style['font-size'] = font_size + 'px'
                    dom.textContent = str
                    document.body.appendChild(dom)
                    const width = dom.clientWidth
                    document.body.removeChild(dom)
                    return width;
                }

                //计算字符串数组中的最大宽度
                function getMaxWidthByArray(text_arr = [], font_size = 12) {
                    //计算设备编号占位的最大宽度
                    var max_width = 0
                    text_arr.forEach(function (str) {
                        var now_text_width = getTextWidth(str, font_size)
                        if (now_text_width > max_width) {
                            max_width = now_text_width
                        }
                    })
                    return max_width
                }

                //获取字符串集合
                var text_list = tableData.map(item => {
                    return item[prop]
                })

                //计算字符串集合的最大宽度
                var target_width = getMaxWidthByArray(text_list,font_size) + padding*2 + 5  //左右padding 20px 和 额外空间 5px
                console.log('target_width = ',target_width)
                //是否设定了最大值 且已经超出
                if (max > 0 && target_width > max) {
                    return max
                } else if(target_width < min){
                    return min
                }else{
                    return target_width
                }
            })
        }
    }
}))

//数据更新时重新渲染表格
//1.先销毁表格
this.render_table = false
//2.数据保存
this.tableData = tableData
//3.重新渲染表格
this.$nextTick(function () {
     this.render_table = true
})