全局修改element默认配置

最新推荐文章于 2025-03-19 09:51:30 发布

筱筱°

最新推荐文章于 2025-03-19 09:51:30 发布

阅读量1k

点赞数 3

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_45665171/article/details/130523948

版权

文章展示了如何在main.js文件中修改ElementUI的默认配置，包括设置el-form表单组件的clearable属性为默认显示小叉号，设置Select和Cascader的placeholder为空，调整TableColumn的minWidth为120px以及showOverflowTooltip为默认开启，同时解决了Dialog弹窗可能导致的页面抖动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在main.js中全局修改element默认配置

main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 全局修改element默认配置
// el-form 表单
// clearable 可清除 默认显示小叉号
ElementUI.Input.props.clearable = {type: Boolean, default: true}
ElementUI.Select.props.clearable = {type: Boolean, default: true}
ElementUI.Cascader.props.clearable = {type: Boolean, default: true}
// placeholder 默认空
ElementUI.Select.props.placeholder = {type: String, default: ''}
ElementUI.Cascader.props.placeholder = {type: String, default: ''}
// el-table 表格
// min-width 默认最小列宽 120px
ElementUI.TableColumn.props.minWidth = {type: String, default: '120'}
// show-overflow-tooltip 默认 true
ElementUI.TableColumn.props.showOverflowTooltip = {type: Boolean, default: true}
// 解决弹窗导致的页面抖动问题
ElementUI.Dialog.props.lockScroll.default = false;
Vue.use(ElementUI)