ElementPlus 组件全局配置

友链：语雀，在线文档协同平台

官方提供的全局配置：Config Provider

本文只做简单的模板参考，具体的配置请根据自己的业务灵活设置，如果你使用的是其它的ui框架，原理应该都差不多

入口文件的配置

注意事项

• 需要设置全局属性的组件先导入进来，比如：ElTable、ElForm、ElInput

• 一定要在这一行之前导入：import ElementPlus from 'element-plus'

模板参考

import { ElTable, ElForm, ElInput } from 'element-plus';

全局组件配置的区域…………

// 最后再导入 ElementPlus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

配置示例

• 表格列内容超出显示省略号

ElTable.TableColumn.props.showOverflowTooltip = {
  type: Boolean,
  default: true
};

• 表单排列方式

ElForm.props.labelPosition = {
  type: String,
  default: 'top'
};

• 表单校验失败时，滚动到第一个错误表单项

ElForm.props.scrollToError = {
  type: Boolean,
  default: true
};

• 函数式写法

ElTable.TableColumn.props.renderHeader = {
  type: Function,
  default: ({ column }) => {
    console.log('column >>>', column);
    return h('div', [
      h(
        ElTooltip,
        {
          content: `${column.label || column.property}`,
          placement: 'top-start'
        },
        [
          h(
            'div',
            {
              style: 'max-width:100%;overflow: hidden; white-space: nowrap;text-overflow:ellipsis'
            },
            column.label || column.property
          )
        ]
      )
    ]);
  }
};