Qin UI Pro

Appearance

ProComponentProvider 基础使用 ​

示例展示 ProComponentProvider 的基础使用与全局默认配置注入能力。

基本使用

  1. 定义 componentVars 参数
  2. 使用 ProComponentProvider 统一包裹 ProForm、ProTable 并注入默认配置
  3. 观察全局配置对字段组件与表格搜索区的整体影响

示例展示 ​


componentVars: { "pro-form": { "grid": { "gutter": 40 }, "labelPosition": "top" }, "pro-table": { "control": { "sizeControl": false }, "searchFormConfig": { "layout": "inline" } }, "input": { "maxlength": 20 }, "input-number": { "min": 0, "max": 999999 }, "input.textarea": { "maxlength": 100 } }
表单
姓名
年龄
性别
出生日期
学历
请选择
兴趣爱好
家庭地址
0 / 100
表格
姓名
年龄
性别
出生日期
学历
兴趣爱好
家庭地址
0 / 100

代码实现 ​

vue
<script lang="ts" setup>
import { ElCard } from 'element-plus';
import {
  ProComponentProvider,
  type ComponentVars,
  ProForm,
  useForm,
  ProTable,
  useTable,
} from '@qin-ui/element-plus-pro';

type FormData = {
  name: string;
  age: number;
  gender: string;
  birthday: string;
  education: string;
  hobby: string[];
  address: string;
};

const form = useForm<FormData>({}, [
  {
    label: '姓名',
    path: 'name',
    component: 'input',
    rules: [{ required: true, message: '请输入姓名' }],
  },
  {
    label: '年龄',
    path: 'age',
    component: 'input-number',
    precision: 0,
    rules: [{ required: true, message: '请输入年龄' }],
  },
  {
    label: '性别',
    path: 'gender',
    component: 'radio-group',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
  },
  { label: '出生日期', path: 'birthday', component: 'date-picker' },
  {
    label: '学历',
    path: 'education',
    component: 'select',
    options: [
      { label: '高中', value: 'high_school' },
      { label: '大专', value: 'college' },
      { label: '本科', value: 'bachelor' },
      { label: '硕士', value: 'master' },
    ],
  },
  {
    label: '兴趣爱好',
    path: 'hobby',
    component: 'checkbox-group',
    options: [
      { label: '唱歌', value: 'sing' },
      { label: '跳舞', value: 'dance' },
      { label: '打篮球', value: 'basketball' },
    ],
  },
  {
    label: '家庭地址',
    path: 'address',
    component: 'input',
    type: 'textarea',
    rows: 3,
  },
]);

const table = useTable<FormData>({
  data: [
    {
      name: '张三',
      age: 18,
      gender: 'male',
      birthday: '2023-01-01',
      education: 'bachelor',
      hobby: ['sing', 'basketball'],
      address: '上海',
    },
  ],
  searchFields: form.fields.value.map(item => ({
    ...item,
    rules: undefined,
    component: 'input' as any,
  })),
  columns: [
    { prop: 'name', label: '姓名', minWidth: 120 },
    { prop: 'age', label: '年龄', width: 100 },
    { prop: 'gender', label: '性别', width: 100 },
    { prop: 'address', label: '家庭住址', minWidth: 180 },
    { prop: 'hobby', label: '兴趣爱好', minWidth: 180 },
  ],
});

const componentVars: ComponentVars = {
  'pro-form': {
    grid: { gutter: 40 },
    labelPosition: 'top',
  },
  'pro-table': {
    control: { sizeControl: false },
    searchFormConfig: { layout: 'inline' },
  },
  input: { maxlength: 20 },
  'input-number': { min: 0, max: 10 ** 6 - 1 },
  'input.textarea': { maxlength: 100 },
};
</script>

<template>
  <ProComponentProvider :component-vars="componentVars">
    <code style="white-space: pre">componentVars: {{ componentVars }}</code>
    <ElCard header="表单" style="margin-top: 24px">
      <ProForm :form="form" grid />
    </ElCard>
    <ElCard header="表格" style="margin-top: 24px">
      <ProTable class="pro-table" :table="table" :pagination="false" />
    </ElCard>
  </ProComponentProvider>
</template>

<style scoped lang="less">
.vp-doc .pro-table {
  :deep {
    table {
      display: table;
      margin: 0;
      overflow-x: initial;

      tr {
        background-color: initial;
        border-top: initial;
        transition: initial;
      }

      th,
      td {
        border: initial;
      }
    }
  }
}
</style>