Tobi 组件库

该组件基于 element-ui 进行二次封装，使用前请确保项目已经安装 element-ui，如果还未安装，请运行以下命令或查看安装:

npm install element-plus --save

// 在main.js中引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

DebounceButton 防抖按钮

防抖按钮，点击后按钮不可点击，在指定时间后按钮恢复可用，防止重复点击。

支持 element-ui 的按钮参数配置，详见文档 | 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | :---: | --- | | time | 防抖时间 | number | - | 300（单位 ms） | | isDebounce | 是否开启防抖操作 | boolean | - | true |

CustomForm 基于 element-ui 的表单组件二次封装而来(持续完善中)

基于配置项实现生成基础的表单页面，支持配置表单项显隐，设置表单值，校验，重置校验，自定义按钮等功能

举个例子
{
  attrs: {
    labelPosition: 'left',
    labelWidth: '100px',
  },
  formItems: [
    {
      prop: 'name',
      label: '姓名',
      component: 'el-input',
      attrs: {
        placeholder: '请输入姓名',
      },
      colAttrs: { span: 12 },
      rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    },
    {
      prop: 'age',
      label: '年龄',
      component: 'el-input',
      attrs: {
        placeholder: '请输入年龄',
      },
      colAttrs: { span: 12 },
      rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    },
    {
      prop: 'hobbies',
      label: '兴趣爱好',
      component: 'el-select-v2',
      defaultValue: '打球',
      attrs: {
        placeholder: '请选择兴趣爱好',
        options: [
          { label: '打球', value: '打球' },
          { label: '打豆豆', value: '打豆豆' },
          { label: '看电影', value: '看电影' },
        ],
      },
      rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'blur' }],
    },
    {
      prop: 'ballType',
      label: '球类',
      component: 'el-select-v2',
      show: (formValue: any = {}) => {
        return ['打球', '看电影']?.includes(formValue['hobbies'])
          ? true
          : false;
      },
      attrs: {
        placeholder: '请选择平时喜欢的球类',
        multiple: true,
        options: [
          { label: '篮球', value: '篮球' },
          { label: '足球', value: '足球' },
          { label: '网球', value: '网球' },
          { label: '排球', value: '排球' },
          { label: '高尔夫', value: '高尔夫' },
          { label: '棒球', value: '棒球' },
          { label: '保龄球', value: '保龄球' },
        ],
      },
      rules: [
        { required: true, message: '请选择平时喜欢的球类', trigger: 'blur' },
      ],
    },
  ],
}

Form 参数说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------------------------------------------------------------------------ | ------ | :----: | ------ | | attrs | 配置项(可见 form 配置参数) | Object | - | - | | formItems | 表单项配置 | Array | - | - | | btns | 底部按钮配置 | Array | - | - | | rowAttrs | 表单布局配置（配置详见）置 | Array | - | - |

FormItem 参数说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------------------------------------------------------------------ | ---------------- | :----: | ------ | | prop | 后端参数 | String | - | - | | label | 名称 | String | - | - | | component | 组件名称，注册全局组件可用 | String | - | - | | show | 是否展示 | Boolean/Function | - | - | | attrs | 组件配置参数 | Object | - | - | | rules | 校验规则(详见) | Array | - | - | | slots | 插槽 | Array | - | - | | events | 组件回调事件 | Array | - | - | | colAttrs | 布局配置（配置详见） | Array | - | - |

slots 参数说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ---------- | -------- | :----: | ------ | | name | 插槽名称 | String | - | - | | render | 渲染的数据 | Function | - | - | | text | 文案 | String | - | - |

btns 参数说明:

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------ | ------ | :----: | ------ | | text | 按钮名称 | String | - | - | | attrs | 按钮配置参数 | Object | - | - | | events | 按钮回调事件 | Object | - | - |

回调事件说明:

| 回调名称 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------------- | -------- | :----: | ------ | | cancel | 点击取消按钮 | Function | - | - | | submit | 点击提交按钮 | Function | - | - | | reset | 重置表单值回调 | Function | - | - | | change | 值变化 | Function | - | - |

提供给父组件的方法:

| 方法名称 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ---------- | -------- | :----: | ------ | | setFormValue | 设置表单值 | Function | - | - | | resetForm | 重置表单值 | Function | - | - | | getFormValue | 获取表单值 | Function | - | - | | resetValidate | 清楚校验 | Function | - | - |

CustomTable 基于 element-ui 的表格组件二次封装而来(持续完善中)

支持 element-ui 中 table 组件的大部分功能，将表格和分页组件合并封装在一起，方便操作

// 举个例子:

// 列配置
const columns = ref([
  {
    prop: 'name',
    label: '姓名',
    width: 100,
  },
  {
    prop: 'age',
    label: '年龄',
    width: 100,
  },
  {
    prop: 'sex',
    label: '性别',
    width: 100,
  },
  {
    prop: 'address',
    label: '地址',
    width: 100,
  },
]);

// 数据配置
const data = ref([
  {
    name: '张三',
    age: 18,
    sex: '男',
    address: '北京',
  },
  {
    name: '李四',
    age: 19,
    sex: '女',
    address: '上海',
  },
  {
    name: '王五',
    age: 20,
    sex: '男',
    address: '广州',
  },
]);

// 表格配置
const tableSetting = {
  attrs: {
    border: true,
    autoResizer: true, // 特别说明，新增autoResizer属性配置，支持虚拟表格组件自动调整列宽
  },
};

参数配置说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ------------------ | ------ | :-------------------------------------: | ------ | | tableCategory | 表格类型 | String | normal（普通表格）、virtual（虚拟表格） | normal | | columns | 表头配置 | Array | - | - | | tableSetting | 表格配置 | Object | - | - | | tableData | 表格数据 | Array | - | - | | total | 总数据（分页用到） | Number | - | - | | paginationSetting | 分页配置 | Object | - | - |

tableSetting 参数配置说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | :----: | ------ | | attrs | 配置参数（支持表格和虚拟表格原有参数配置项） | Object | - | - | | slot | 插槽配置 | Array | - | - | | events | 事件配置 | Object | - | - |

paginationSetting 参数配置说明：

| 基本参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | --------------------------------------------------------------------------------------- | ------- | :----: | ------ | | show | 是否使用分页 | Boolean | - | true | | attrs | 分页配置 | Object | - | - | | events | 事件配置 | Object | - | - |

回调事件说明:

| 回调名称 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | -------------------------------------------- | -------- | :----: | ----------------------------------------------- | | currentChange | 分页 current-page 改变触发 | Function | - | (value: number) => void | | sizeChange | 分页 page-size 改变时触发 | Function | - | (value: number) => void | | paginationChange | 分页 current-page 或 page-size 更改时触发 | Function | - | (currentPage: number, pageSize: number) => void | | prevClick | 分页 用户点击上一页按钮改变当前页时触发 | Function | - | (value: number) => void | | nextClick | 分页 用户点击下一页按钮改变当前页时触发 | Function | - | (value: number) => void | | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | Function | - | <T = any>(selection: T[], row: T) => void | | selectAll | 当用户手动勾选全选 Checkbox 时触发的事件 | Function | - | (selection: any[]) => void |