全局配置

该组件的全局配置依附于 ElConfigProvider 组件的 experimental-features 属性中。

这是非常重要且方便的功能，可以非常轻松地为表格，表格分页，表单组件添加全局配置，比如智能生成 placeholder 属性, 为日期组件智能设置格式化等。

<template>
  <div class="demo">
    <ElConfigProvider :locale="zhCn" :experimental-features="{ ElementPlusCrx }">
      <BaseForm></BaseForm>
      <BaseTable></BaseTable>
    </ElConfigProvider>
  </div>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import BaseForm from './formGrid.vue'
import BaseTable from './tableBase.vue'
import type { ElementPlusCrxConfig } from "../packages"

const ElementPlusCrx: ElementPlusCrxConfig = {
  AgelTable: {
    ElTable: {
      border: true,
      highlightCurrentRow: true,
    },
    ElPagination: {
      layout: 'prev, pager, next, sizes, ->, total',
      pageSizes: [10, 20, 50, 100],
      background: true,
    },
    ElTableColumn: {
      align: "center",
      showOverflowTooltip: true,
    }
  },
  AgelFormItem: {
    AgelSelect: function (props: any) {
      return {
        placeholder: '请选择' + props.label,
      }
    },
    ElInput: function (props: any) {
      return {
        clearable: true,
        placeholder: '请输入' + props.label,
      }
    },
    ElDatePicker: function (props: any) {
      let valueFormat = 'YYYY-MM-DD'
      let dateType = props?.attrs?.type
      if (dateType == "datetime" || dateType == "datetimerange") {
        valueFormat = "YYYY-MM-DD HH:mm:ss"
      }
      if (dateType == "month" || dateType == "monthrange") {
        valueFormat = "YYYY-MM"
      }
      if (dateType == "year") {
        valueFormat = "YYYY"
      }
      return {
        valueFormat,
        placeholder: '请选择' + props.label,
      }
    }
  },
}
</script>

支持配置类型如下：

export interface ElementPlusCrxConfig {
  AgelTable?: {
    ElTable?: Partial<TableProps<any>>,
    ElTableColumn?: Partial<ElTableColumnProps>,
    ElPagination?: Partial<PaginationProps>,
  },
  AgelFormItem?: {
    [ComponentName: string]: (ComponentProps: any) => { [ComponentProp: string]: any }
  }
}

export function useCrxGlobalConfig(): ElementPlusCrxConfig {
  const config = useGlobalConfig().value as any
  if (config && config.experimentalFeatures && config.experimentalFeatures.ElementPlusCrx) {