Element ui 统一修改组件样式、表格样式、表单样式

原创已于 2024-05-15 09:42:56 修改 · 718 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #vue #elementui

于 2024-05-15 09:41:56 首次发布

通过引入element-ui 组件的props来修改，继续需要修改哪个组件的属性，可以通过文档来打印来看，如表格的属性 ElementUI.Table.props

// 引入element-ui
import ElementUI from 'element-ui'

// 表单默认尺寸
ElementUI.Form.props.size.default = 'small'


// 按钮默认尺寸
ElementUI.Button.props.size.default = 'small'

// 表格样式
ElementUI.Table.props.headerCellStyle.default = () => {
  return {
    border: "0",
    background: "#F2F4F7",
    color: "#333333",
    fontWeight: "700",
    userSelect: "text",
  };
}
ElementUI.Table.props.cellStyle.default = () => {
  return {
    padding: "6px 0",
    border: "0",
    borderBottom: "1px solid #EBEDF0"
  };
}
ElementUI.Table.props.rowStyle.default = () => {
  return {
    height: "40px"
  };
}