vxe-table 渲染组件

基本介绍

自定义渲染组件，为了保证整体 ui 展示一致性，像基本的组件输入框，下拉选项，单选，时间框等无需使用 vxe-table 提供的，默认情况应该使用 naive-ui 的渲染器。提供的渲染器包括：baseDictRender,baseOrgRender,basePersonRender,baseUserRender,pulldownRender, NButton,NButtons,NDatePicker,NInput,NInputNumber,NSelect,NSwitch,NTag,NUpload;

使用方式

vxe-grid 组件文档

vxe-form 组件文档

使用示例

人员 table 查询表单配置,其中使用了NInput，NSelect,NButton渲染器，其中 props 对应 naive-ui 组件的参数，具体参数就可以查看 naive-ui 组件的文档

export function personTableFormConfig(): VxeGridPropTypes.FormConfig {
  return {
    data: { account: null, displayName: null, name: null, mobile: null, groupNum: null, status: '1' },
    items: [
      {
        field: 'account',
        title: '登录帐号',
        itemRender: {
          name: 'NInput',
          attrs: { placeholder: '请输入登录帐号' }
        }
      },
      {
        field: 'status',
        title: '人员状态',
        itemRender: {
          name: 'NSelect',
          options: baseDict.getDictItems('basePersonStatus'),
          optionProps: { value: 'code', label: 'name' },
          props: { placeholder: '请选择人员状态' }
        }
      },
      {
        itemRender: {
          name: 'NButton',
          props: { content: '查询', attrType: 'submit', type: 'primary' }
        }
      },
      {
        itemRender: {
          name: 'NButton',
          props: { content: '重置', attrType: 'reset' }
        }
      }
    ]
  };
}

用户新增修改的表单，其中包括baseUserRender的渲染器

const userFormOptions = reactive<VxeFormProps>({
  loading: false,
  titleAlign: 'right',
  titleWidth: '80',
  data: { userIds: [] },
  items: [
    {
      field: 'userIds',
      title: '用户选择',
      span: 24,
      itemRender: {
        name: 'baseUserRender',
        props: {
          clearable: true,
          renderType: 'page',
          placeholder: '请选择授权用户',
          valueField: 'id',
          autoLoadData: true,
          multiple: true,
          queryParams: { orgId: props.tabPane.params.orgId }
        }
      }
    }
  ]
});

人员图片 table 列字段配置，其中包括baseDictRender,NInput的渲染器

export function personPicTableColumns(): VxeGridPropTypes.Columns {
  return [
    { type: 'seq', width: 60, title: '序号', fixed: 'left' },
    { type: 'checkbox', width: 45 },
    { field: 'id', title: 'ID', minWidth: 100, visible: false },
    {
      field: 'displayName',
      title: '人员名称',
      minWidth: 120,
      editRender: { enabled: false, name: 'NInput' }
    },
    {
      field: 'type',
      title: '照片类别',
      minWidth: 100,
      editRender: {
        name: 'baseDictRender',
        props: {
          autoLoadData: true,
          dictCode: 'person_pic_type'
        }
      }
    },
    {
      field: 'url',
      title: '照片路径',
      minWidth: 100,
      editRender: {
        name: 'NInput',
        props: {
          placeholder: '请输入属性值'
        }
      }
    },
    {
      field: 'memo',
      title: '备注',
      editRender: {
        name: 'NInput',
        props: {
          type: 'textarea',
          autosize: { minRows: 1, maxRows: 1 },
          placeholder: '请输入备注'
        }
      }
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      slots: { default: 'operation' }
    }
  ];
}

用户 form 表单配置项,其中包含pulldownRender的使用

export function userFormItems(params?: { personId?: any; orgId?: any }): VxeFormPropTypes.Items {
  return [
    {
      field: 'orgPersonId',
      title: '组织人员',
      span: 24,
      itemRender: {
        name: 'pulldownRender',
        props: {
          renderType: 'page',
          placeholder: '请选择组织人员',
          valueField: 'id',
          labelField: 'displayName',
          multiple: true,
          autoLoadData: true,
          cellLabelField: 'orgPersons_temp',
          tableOptions: {
            columns: [
              { type: 'seq', width: 60, title: '序号', fixed: 'left' },
              { type: 'checkbox', width: 45 },
              { field: 'id', title: 'ID', minWidth: 100, visible: false },
              { field: 'displayName', title: '显示姓名', minWidth: 100 },
              { field: 'orgName', title: '组织名称', minWidth: 100 },
              { field: 'activeTime', title: '生效时间', minWidth: 100 },
              { field: 'inactiveTime', title: '失效时间', minWidth: 100 }
            ],
            formConfig: tableDefaultFormConfig({
              data: { displayName: null },
              items: [
                {
                  field: 'displayName',
                  title: '显示姓名',
                  itemRender: {
                    name: 'NInput',
                    attrs: { placeholder: '请输入显示姓名' }
                  }
                }
              ]
            })
          },
          fetchTableData: ({ tableOptions }: TableRender.fetchTableDataRenderParams) => {
            const queryParams = tableOptions.formConfig?.data;
            queryParams.orgType = '1';
            queryParams.orgPersonStatus = '1';
            queryParams.orgStatus = '1';
            if (params) {
              if (params.personId) {
                queryParams.personId = params.personId;
              }
              if (params.orgId) {
                queryParams.orgId = params.orgId;
              }
            }
            queryParams.current = tableOptions.pagerConfig?.currentPage;
            queryParams.size = tableOptions.pagerConfig?.pageSize;
            return getOrgPersonPage(queryParams);
          }
        }
      }
    },
    {
      span: 24,
      slots: { default: 'orgPersonInfo' }
    },
    {
      align: 'center',
      span: 24,
      slots: { default: 'formOperation' }
    }
  ];
}

自定义组件的参数说明

baseDictRender渲染组件的 props，分为两种情况，一种是渲染 renderType 等于 select，另一种是 page

第一种等于 select 时：

interface Props {
  value?: string | number | Array<number | string> | null;
  consistentMenuWidth?: boolean;
  defaultValue?: Array<string | number> | string | number | null;
  disabled?: boolean;
  clearable?: boolean;
  options?: Array<SelectOption | SelectGroupOption>;
  placeholder?: string;
  maxTagCount?: number | 'responsive';
  multiple?: boolean;
  show?: boolean | undefined;
  showArrow?: boolean;
  size?: 'small' | 'medium' | 'large';
  valueField?: string;
  labelField?: string;
  virtualScroll?: boolean;
  onClear?: (params: TableRender.OnClearSelectRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValueSelectRenderParams) => void;
  autoLoadData?: boolean;
  isLoadData?: boolean;
  fetchTableData?: (params: TableRender.FetchTableDataSelectRenderParams) => Promise<{ data: any[] }>;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  queryParams?: any;
  dictCode: string | number;
}

第二种等于 page 时：

interface Props {
  value?: string | number | Array<number | string> | null;
  clearable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  tableOptions?: VxeGridProps;
  placeholder?: string | number;
  valueField?: string;
  labelField?: string;
  onClear?: (params: TableRender.OnClearPageRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValuePageRenderParams) => void;
  fetchTableData?: (params: TableRender.FetchTableDataPageRenderParams) => Promise<{ data: any }>;
  handlePageChange?: (params: TableRender.HandlePageChangePageRenderParams) => void;
  autoLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  multiple?: boolean;
  queryParams?: any;
  dictCode: string | number;
}

baseOrgRender渲染组件的 props

interface Props {
  value?: string | number | Array<number | string>;
  allowCheckingNotLoaded?: boolean;
  cascade?: boolean;
  checkable?: boolean;
  checkStrategy?: string;
  childrenField?: string;
  clearable?: boolean;
  clearFilterAfterSelect?: boolean;
  defaultValue?: string | number | Array<number | string> | null;
  defaultExpandAll?: boolean;
  disabled?: boolean;
  expandTrigger?: 'click' | 'hover';
  filterabl?: boolean;
  filter?: (pattern: string, option: TreeSelectOption) => boolean;
  valueField?: string;
  labelField?: string;
  maxTagCount?: number | 'responsive';
  multiple?: boolean;
  options?: TreeSelectOption[];
  placeholder?: string;
  remote?: boolean;
  separator?: string;
  showPath?: boolean;
  virtualScroll?: boolean;

  onBlur?: () => void;
  onFocus?: () => void;
  onLoad?: (option: TreeSelectOption) => Promise<void>;
  onUpdateValue?: (params: TableRender.OnUpdateValueTreeSelectRenderParams) => void;
  autoLoadData?: boolean;
  isLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  onMountedFun?: (params: any) => void;
  queryParams?: any;
  expandedKeys?: Array<string | number>;
  onUpdateExpandedKeys?: (value: Array<string | number>) => void;
  defaltExpand?: boolean;
}

basePersonRender渲染组件的 props

interface Props {
  value?: string | number | Array<number | string> | null;
  clearable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  tableOptions?: VxeGridProps;
  placeholder?: string | number;
  valueField?: string;
  labelField?: string;
  onClear?: (params: TableRender.OnClearPageRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValuePageRenderParams) => void;
  fetchTableData?: (params: TableRender.FetchTableDataPageRenderParams) => Promise<{ data: any }>;
  handlePageChange?: (params: TableRender.HandlePageChangePageRenderParams) => void;
  autoLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  multiple?: boolean;
  queryParams?: any;
}

baseUserRender渲染组件的 props

interface Props {
  value?: string | number | Array<number | string> | null;
  clearable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  tableOptions?: VxeGridProps;
  placeholder?: string | number;
  valueField?: string;
  labelField?: string;
  onClear?: (params: TableRender.OnClearPageRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValuePageRenderParams) => void;
  fetchTableData?: (params: TableRender.FetchTableDataPageRenderParams) => Promise<{ data: any }>;
  handlePageChange?: (params: TableRender.HandlePageChangePageRenderParams) => void;
  autoLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  multiple?: boolean;
  queryParams?: any;
}

pulldownRender渲染组件的 props，分为三种种情况，一种是渲染 renderType 等于 select，或 page，另一种是 treeSelect

第一种等于 select 时：

interface Props {
  value?: string | number | Array<number | string> | null;
  consistentMenuWidth?: boolean;
  defaultValue?: Array<string | number> | string | number | null;
  disabled?: boolean;
  clearable?: boolean;
  options?: Array<SelectOption | SelectGroupOption>;
  placeholder?: string;
  maxTagCount?: number | 'responsive';
  multiple?: boolean;
  show?: boolean | undefined;
  showArrow?: boolean;
  size?: 'small' | 'medium' | 'large';
  valueField: string;
  labelField: string;
  virtualScroll?: boolean;
  onClear?: (params: TableRender.OnClearSelectRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValueSelectRenderParams) => void;
  autoLoadData?: boolean;
  isLoadData?: boolean;
  fetchTableData: (params: TableRender.FetchTableDataSelectRenderParams) => Promise<{ data: any[] }>;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  queryParams?: any;
}

第二种等于 page 时：

interface Props {
  value?: string | number | Array<number | string> | null;
  clearable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  tableOptions: VxeGridProps;
  placeholder?: string | undefined;
  valueField: string;
  labelField: string;
  onClear?: (params: TableRender.OnClearPageRenderParams) => void;
  onUpdateValue?: (params: TableRender.OnUpdateValuePageRenderParams) => void;
  fetchTableData: (params: TableRender.FetchTableDataPageRenderParams) => Promise<{ data: any }>;
  handlePageChange?: (params: TableRender.HandlePageChangePageRenderParams) => void;
  autoLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  multiple?: boolean;
  queryParams?: any;
  getOnlyName?: boolean; // 单选获取名字
  translation?: (params: { input: BaseFrom.InputParams }) => void;
}

第三种等于 treeSelect 时：

interface Props {
  value?: string | number | Array<number | string> | null;
  allowCheckingNotLoaded?: boolean;
  cascade?: boolean;
  checkable?: boolean;
  checkStrategy?: string;
  childrenField?: string;
  clearable?: boolean;
  clearFilterAfterSelect?: boolean;
  defaultValue?: string | number | Array<number | string> | null;
  defaultExpandAll?: boolean;
  defaultExpandKeys?: Array<string | number>;
  expandedKeys?: Array<string | number> | undefined;
  disabled?: boolean;
  expandTrigger?: 'click' | 'hover';
  filterabl?: boolean;
  filter?: (pattern: string, option: TreeSelectOption) => boolean;
  valueField: string;
  labelField: string;
  maxTagCount?: number | 'responsive';
  multiple?: boolean;
  options?: TreeSelectOption[];
  placeholder?: string;
  remote?: boolean;
  separator?: string;
  showPath?: boolean;
  virtualScroll?: boolean;
  onBlur?: () => void;
  onFocus?: () => void;
  onLoad?: (option: TreeSelectOption) => Promise<void>;
  onUpdateValue?: (params: TableRender.OnUpdateValueTreeSelectRenderParams) => void;
  autoLoadData?: boolean;
  isLoadData?: boolean;
  getRenderData: () => TableRender.RenderDataParams;
  cellLabelField?: string;
  onMountedFun?: (params: any) => void;
  fetchTableData: (params: TableRender.FetchTableDataSelectRenderParams) => Promise<{ data: any[] }>;
}

vxe-table 渲染组件 ​

基本介绍 ​

使用方式 ​

使用示例 ​

自定义组件的参数说明 ​

vxe-table 渲染组件

基本介绍

使用方式

使用示例

自定义组件的参数说明