versa-form v0.0.28

表单配置化系统

快速入门

npm i versa-form@lastest

import { createApp } from "vue";
// 引入需要的组件
import * as Versa from "versa-form";
// 引入样式
import "versa-form/lib/style.css";

const app = createApp(App);
app.use(Versa);

versa-page

页面增删查改组件。

使用示例

基础用法

快捷开启增删查改配置。

<versa-page
    actions="reset,search,create"
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [
            {
                label: '启用状态',
                prop: 'status',
                element: 'versa-select'
            },
        ],
        tableOptions: [
            {
                prop: 'itemCode',
                label: '明细代码',
            },
            {
                prop: 'itemCode1',
                label: '明细代码1',
            },
            {
                actions: ['edit', 'detail', 'remove'],
                label: '操作',
                align: 'center',
                fixed: 'right',
                width: 250
            }
        ],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

表单联动

filterOptions、detailProps 均渲染为versa-form，支持表单项动态渲染（when）及校验规则动态配置(rules)

<versa-page
    actions="reset,search,create"
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [],
        tableOptions: [],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                },
                {
                    label: '动态渲染',
                    prop: 'dynamicRender',
                    element: 'el-input',
                    placeholder: '请选择',
                    when: (formValues) => formValues.id === '1'
                },
                {
                    label: '动态校验',
                    prop: 'dynamicRules',
                    element: 'el-input',
                    placeholder: '请选择',
                    rules: (formValues) => [{required: formValues.id === '1'}]
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

嵌套表单

versa-form支持嵌套表单使用，通过配置 element 为versa-form可支持嵌套表单。

<versa-page
    actions="reset,search,create"
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [],
        tableOptions: [],
        detailProps: {
            options: [
                {
                    label: 'Switch 开关',
                    prop: 'el-switch',
                    element: 'el-switch'
                },
                {
                    label: '嵌套表单',
                    prop: 'nest-form',
                    inline: true,
                    element: 'versa-form',
                    'label-position': 'right',
                    options: [
                        {
                            // label: '日期选择',
                            prop: 'date',
                            element: 'el-date-picker',
                            type: 'date',
                            placeholder: '请输入',
                            rules: [{ required: true }],
                        },
                        {
                            // label: '选择年',
                            prop: 'year',
                            placeholder: '请输入',
                            element: 'el-date-picker',
                            type: 'year'
                        }
                    ]
                },
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

自定义 filter 操作按钮

通过配置 actions 属性，进行自定义 filter 操作按钮，支持通过btns插槽在末尾增加自定义操作按钮。

<versa-page
    :actions="filterActions"
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
    <template #btns>
        <button>插槽按钮</button>
    </template>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterActions: [
            'search',
            { actionName: '重置', actionType: 'reset', type: 'normal' },
            {
                actionName: '模板下载',
                actionType: 'templateKey',
                type: 'primary',
                action: () => {
                    console.log('模板下载')
                }
            }
        ],
        filterOptions: [
            {
                label: '启用状态',
                prop: 'status',
                element: 'el-select',
                placeholder: '请选择',
            },
        ],
        tableOptions: [
            {
                prop: 'itemCode',
                label: '明细代码',
            },
        ],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

自定义 filter 校验规则

filterOptions每一个配置项支持自定义 rules 来做表单校验，校验不通过初始或者重置的调用接口逻辑均不会触发。

<versa-page
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [
            {
                label: '启用状态',
                prop: 'status',
                element: 'el-select',
                placeholder: '请选择',
                rules: [{
                    required: true
                }]
            },
        ],
        tableOptions: [
            {
                prop: 'itemCode',
                label: '明细代码',
            },
        ],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

列表动态插槽使用

tableOptions通过扩展slotName来自定义单元格展示

<versa-page
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
    <template #itemLevel="{ row, index }">
        <div>这是单元格插槽{{ index }}</div>
    </template>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [
            {
                label: '启用状态',
                prop: 'status',
                element: 'el-select',
                placeholder: '请选择',
            },
        ],
        tableOptions: [
            {
                prop: 'itemCode',
                label: '明细代码',
            },
        ],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

修改默认弹窗配置

create、detail、edit操作均使用内置弹窗，可以通过覆盖配置修改弹窗或者表单熟悉。

<versa-page
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :queryFunc="queryFunc"
>
</versa-page>

<script>
  export default {
    data() {
      return {
        filterOptions: [
            {
                label: '启用状态',
                prop: 'status',
                element: 'el-select',
                placeholder: '请选择',
                rules: [{
                    required: true
                }]
            },
        ],
        tableOptions: [
            {
                prop: 'itemCode',
                label: '明细代码',
            },
            {
                prop: 'itemDesc1',
                label: '覆盖默认弹窗配置',
                width: 200,
                actions: (...rest) => {
                    return [
                        {
                            actionName: "信息变更",
                            actionType: "detail",
                            options: [
                                {
                                    label: "所属企业",
                                    prop: "itemDesc",
                                    element: "el-input",
                                },
                            ],
                            actions: [
                                {
                                    actionType: 'cancel',
                                    actionName: '取消'
                                },
                            ],
                        },
                    ]
                },
            },
        ],
        detailProps: {
            options: [
                {
                    label: '规则id',
                    prop: 'id',
                    element: 'el-input',
                    placeholder: '请选择',
                }
            ]
        }
      };
    },
    methods: {
        queryFunc(values) {
            const count = Math.floor(Math.random() * 10);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                        resultCode: '1000',
                        data: {
                            total: count,
                            list: Array.from({ length: count }, () => {
                                itemCode: '字典key',
                                itemValue: '字典value',
                            })
                        }
                    });
                }, 1000);
            });
        }
    }
  };
</script>

各种插槽嵌套

<versa-page
    actions="reset,search,create"
    rowKey="id"
    headline="查询列表"
    :filterOptions="filterOptions"
    :tableOptions="tableOptions"
    :detailProps="detailProps"
    :query-func="queryFunc"
    :toolOptions="toolOptions"
>
    /* 单元格插槽 */
    <template #itemLevel="{ row, index }">
        <div>r23{{ index }}</div>
    </template>
    /* 弹窗底部插槽，可以嵌套page和table等组件 */
    <template #modalFooter="{ model, actionType }">
        <template v-if="actionType === 'nestPage'">
            <versa-page
                actions="reset,search,create"
                :filterOptions="filterOptions.slice(0, 2)"
                :tableOptions="tableOptions"
                :detailProps="detailProps"
                :query-func="queryFunc"
            >
            </versa-page>
        </template>
        <template v-if="actionType === 'nestTable'">
            <versa-table
                :options="[
                    {
                        label: '手机号',
                        prop: 'telphone',
                        sensitive: true
                    }
                ]"
                :autoLoad="false"
                :tableData="model.list"
            >
            </versa-table>
        </template>
    </template>
    /* 工具栏插槽 */
    <template #tools>
        <div>这是工具栏插槽</div>
    </template>
    /* 列表底部插槽 */
    <template #footer>
        <div>这是列表底部插槽</div>
    </template>
</versa-page>

嵌套表单卡片式布局

嵌套表单通过labelType属性进行卡片式布局。

<versa-form
    ref="VersaForm"
    labelWidth="90px"
    :defaultValues="defaultValues"
    :options="formOptions"
    :status="status"
    v-model="formValue"
>
</versa-form>

<script>
  export default {
    data() {
      return {
        formOptions = [
            {
                label: '基础信息模块',
                prop: 'basic',
                // inline: true,
                element: 'versa-form',
                labelType: {
                    type: 'card',
                    shadow: 'always'
                },
                options: [
                    {
                        label: '单选框组',
                        prop: 'radio-group',
                        element: 'el-radio-group',
                        // button: true,
                        labelInValue: {
                            label: 'name',
                            value: 'code'
                        },
                        mapSource: {
                            test1: '测试1',
                            test2: '测试2',
                            test3: '测试3'
                        },
                        rules: [{ required: true }]
                    },
                    {
                        label: '多选框组',
                        prop: 'checkbox-group',
                        element: 'el-checkbox-group',
                        // button: true,
                        labelInValue: {
                            label: 'name',
                            value: 'code'
                        },
                        mapSource: {
                            test1: '测试1',
                            test2: '测试2',
                            test3: '测试3'
                        }
                    },
                    {
                        label: '启用状态',
                        prop: 'status',
                        element: 'el-select',
                        mapSource: statusMap,
                        hasAll: true
                    },
                ]
            },
            {
                label: '日期模块',
                prop: 'nest-form',
                element: 'versa-form',
                labelType: 'card',
                options: [
                    {
                        label: '日期选择',
                        prop: 'date',
                        element: 'el-date-picker',
                        type: 'date',
                        placeholder: '请输入',
                        rules: [{ required: true }],
                    },
                    {
                        label: '选择年',
                        prop: 'year',
                        placeholder: '请输入',
                        element: 'el-date-picker',
                        type: 'year'
                    }
                ]
            },
            {
                label: 'repeater',
                prop: 'VersaRepeater',
                type: 'inline',
                labelType: {
                    type: 'card',
                    actions: [{
                        actionType: '测试',
                        actionName: '测试',
                    }],
                    toolPosition: 'header',
                },
                element: 'versa-repeater',
                fixedMode: 9,
                options: [
                    {
                        label: '单选框组',
                        prop: 'radio-group',
                        element: 'el-radio-group',
                        mapSource: {
                            test1: '测试1',
                            test2: '测试2',
                            test3: '测试3'
                        },
                        width: 300,
                        rules: [{ required: true }]
                    },
                    {
                        label: '多选框组',
                        prop: 'checkbox-group',
                        element: 'el-checkbox-group',
                        mapSource: {
                            test1: '测试1',
                            test2: '测试2',
                            test3: '测试3'
                        },
                        width: 300,
                    }
                ]
            }
        ]
      };
    }
  };
</script>

API

Actions 枚举说明

按钮配置项，在各个场景内置如下配置项，可以直接通过内置 actionType 进行匹配，自定义操作按钮 actionType 原则上不允许与内置冲突：

内置配置项可以配置完整 actionName、actionType 进行重命名和修改按钮样式

export const presetActions = {
    reset: {
        actionType: 'reset',
        actionName: '重置'
    },
    search: {
        type: 'primary',
        actionType: 'search',
        actionName: '查询'
    },
    create: {
        actionType: 'create',
        actionName: '新建'
    },
    remove: {
        actionType: 'remove',
        actionName: '删除',
        popconfirm: {
            title: '确定删除吗？',
            confirmType: 'popconfirm'
        }
    },
    edit: {
        actionType: 'edit',
        actionName: '编辑'
    },
    detail: {
        actionType: 'detail',
        actionName: '详情'
    }
}

内置操作按钮均渲染为versa-button组件，所以基础配置与其一致，额外支持如下属性：

当usePageModal为true或者actionType为内置弹窗操作(edit、detail、create)时，action 的配置会传入 Modal 组件进行属性覆盖。

若想使用内置的弹窗，强烈建议通过usePageModal属性进行配置，不建议修改edit、detail、create配置项，防止出现不可控 bug。

FilterActions

筛选组件操作按钮配置，本模块内置按钮支持reset、search、create三种，额外增加的 action 配置下如下：

该模块不支持popconfirm配置

内置三种操作按钮均强制触发搜索条件校验，自定义操作按钮需要进行单独配置，若自定义按钮validate设为true且校验不通过，则不会触发按钮点击回调。

action 回调参数如下

action?.(formValues, instance)

TableOptions

列表配置项，同 el-table 属性，在此基础上新增如下配置：

列表行模块 actions 内置支持edit(编辑)、detail(详情)、remove(删除)；

1. 数组模式配置

actions: [
  {
    actionType: "edit",
    actionName: "编辑1",
    "append-to-body": true,
  },
  "detail",
  "remove",
  {
    actionType: "nestPage",
    actionName: "测试嵌套page",
    title: "测试嵌套page",
    usePageModal: true,
    width: "80%",
    "append-to-body": true,
    options: [
      {
        label: "所属企业",
        prop: "itemDesc",
        element: "el-input",
      },
    ],
  },
];

2. 函数模式配置

该模式支持传入当前行、列信息row、column、$index，用于动态的渲染操作按钮

actions: (row, column, $index) => {
    return [
        {
            actionName: "信息变更",
            actionType: "detail21212",
            usePageModal: true,
            title: '信息变更马里奥',
            options: []
        },
    ]
},

3. action 回调参数

action?.(row, instance, options)

4. sensitiveTypel 枚举

• cellphone 大陆手机号
• identity 身份证
• Function 若为函数时候，将拿到当前行数据作为入参返回上述类型，也可以返回函数用于自定义，即： (formValues) => (value) => 'custom rules'

ToolOptions

table 顶部操作栏按钮配置，本模块内置按钮支持create一种，无额外配置。action 回调参数如下所示：

action?.(multipleSelection, options, options)

DetailProps

内置弹窗配置项, edit、detail、create三种弹窗复用相同弹窗，弹窗支持 dialog 和 drawer 模式且弹窗内置 form 表单。

除了上述所列的属性，其余配置会自动透传到el-dialog、 el-drawer上。

actions操作按钮配置，本模块内置按钮支持cancel、confirm两种，额外增加的 action 配置下如下：

该模块不支持popconfirm配置

内置三种操作按钮均强制触发搜索条件校验，自定义操作按钮需要进行单独配置，若自定义按钮validate设为true且校验不通过，则不会触发按钮点击回调。

action 回调参数如下

action?.(formValues, done)

FormOption

表单配置项。filter、modal模块均存在表单功能，配置保持一致，均使用versa-form功能，FormOption为表单每一项的配置，兼容el-form所支持功能，扩展属性如下：

插槽

表单配置项

filter和modal配置项均内置表单行为，通过传入对应的表单配置项则可以拥有完整的表单功能。

versa-button

按钮组件，基于el-button增加防抖等功能

使用示例

<VersaButton
    popconfirm="有了这些知识，我们现在可以完成我们最开始想实现的组件"
    @click="onClickWithLoading"
    @cancel="onCancel"
>
    popConfirm按钮
</VersaButton>
<VersaButton
    :popconfirm="{
        confirmType: 'messageBox',
        message: '有了这些知识，我们现在可以完成我们最开始想实现的组件',
        type: 'warning',
        title: '提示'
    }"
    @click="onClickWithLoading"
    @cancel="onCancel"
>
    MessageBox按钮
</VersaButton>
<VersaButton @click="onClickWithLoading">带loading状态</VersaButton>

onClickWithLoading(e, instance) {
    instance.isLoading = true;
    instance.text = '在做了，别催';
    setTimeout(() => {
        instance.isLoading = false;
        instance.text = '';
    }, 3000);
}

onCancel(...rest) {
    console.log('onCancel', rest);
},

API

popconfirm 用于整合MessageBox 和 Popconfirm两种二次确认弹窗，默认映射为，MessageBox，如需要改变任何属性可通过对象形式进行覆盖。

Page任何内置部位的按钮若为cancel操作类型，默认映射为Popconfirm。

事件

click 存在两个参数：

• e 事件
• instance 组件实例，可以通过其直接修改组件 loading 状态(isLoading)、文案(text)

当在versa-page子孙组件中使用按钮组件时，instance支持响应式的获取如下全局参数：

versa-dropdown

下拉菜单组件，基于el-dropdown增加防抖、配置化等功能

使用示例

// 在配置actions中使用
actions: [
  {
    is: "versa-dropdown",
    // labelInValue: {
    //     label: 'name',
    //     value: 'code'
    // },
    // mapSource: {
    //     test1: '测试1',
    //     test2: '测试2',
    //     test3: '测试3'
    // },
    text: "下拉菜单",
    on: {
      command: (val, instance) => {
        instance.isLoading = true;
        setTimeout(() => {
          instance.isLoading = false;
        }, 3000);
      },
    },
    options: [
      {
        label: "测试1",
        value: "test1",
        disabled: true,
      },
      {
        label: "测试2",
        value: "test2",
      },
      {
        label: "测试3",
        value: "test3",
      },
    ],
  },
];

API

事件

command 存在两个参数：

• val 点击回调参数
• instance 组件实例，可以通过其直接修改组件 loading 状态(isLoading)

versa-checkbox-group

配置化的可选组，基于el-checkbox-group增加配置化、预览等功能

使用示例

// 在filter、form配置中使用
{
    label: '多选框组',
    prop: 'checkbox-group',
    element: 'versa-checkbox-group',
    // button: true,
    labelInValue: {
        label: 'name',
        value: 'code'
    },
    mapSource: {
        test1: '测试1',
        test2: '测试2',
        test3: '测试3'
    }
    // options: [{
    //     label: '测试1',
    //     value: 'test1',
    //     disabled: true,
    // }, {
    //     label: '测试2',
    //     value: 'test2'
    // }, {
    //     label: '测试3',
    //     value: 'test3'
    // }]
},

API

versa-radio-group

配置化的单选组，基于el-radio-group增加配置化、预览等功能

使用示例

// 在filter、form配置中使用
{
    label: '单选框组',
    prop: 'radio-group',
    element: '[el|versa]-radio-group',
    // button: true,
    labelInValue: {
        label: 'name',
        value: 'code'
    },
    mapSource: {
        test1: '测试1',
        test2: '测试2',
        test3: '测试3'
    },
    // options: [{
    //     label: '测试1',
    //     value: 'test1',
    //     disabled: true,
    // }, {
    //     label: '测试2',
    //     value: 'test2'
    // }, {
    //     label: '测试3',
    //     value: 'test3'
    // }],
    rules: [{ required: true }]
},

API

versa-repeater

增删查改组件, 可以配置到 versa-form 组件使用

使用示例

<VersaRepeater
    v-bind="repeatProps"
    type="sync"
    hasMoveUp
    hasMoveDown
    v-model="formValues"
    :asyncHandler="asyncHandler"
    :fixedMode="9"
></VersaRepeater>

{
    repeatProps: {
        options: [
            {
                label: '单选框组',
                prop: 'radio-group',
                element: 'el-radio-group',
                mapSource: {
                    test1: '测试1',
                    test2: '测试2',
                    test3: '测试3'
                },
                width: 300,
                rules: [{ required: true }]
            },
            {
                label: '多选框组',
                prop: 'checkbox-group',
                element: 'el-checkbox-group',
                mapSource: {
                    test1: '测试1',
                    test2: '测试2',
                    test3: '测试3'
                },
                width: 300,
                fixed: 'left'
            },
            {
                label: '启用状态',
                prop: 'status',
                element: 'el-select',
                mapSource: statusMap,
                width: 240,
                hasAll: true
            },
            {
                label: '输入框',
                prop: 'telphone',
                sensitive: true,
                width: 160,
                element: 'el-input',
                placeholder: '请输入',
                rules: [{ required: true, trigger: 'change', message: '必填噢' }]
            },
            {
                label: '文本域',
                prop: 'el-input-textarea',
                type: 'textarea',
                element: 'el-input',
                placeholder: '请输入',
                width: 240,
            },
            {
                label: '计数器',
                prop: 'el-input-number',
                element: 'el-input-number',
                placeholder: '请输入',
            },
            {
                label: 'Switch 开关',
                prop: 'el-switch',
                element: 'el-switch',
                fixed: 'right'
            }
        ]
    },
    formValues: [
        { id: 1, 'radio-group': 'test1', telphone: 13328138531 },
        {
            'radio-group': 'test2',
            telphone: 13328138531
        }
    ],
    asyncHandler: {
        save: (...args) => {
            return true;
        }
    }
}

API

表单模型(type)

• sync, 行内编辑，即时修改数据并同步到外部表单

  内置的操作有：删除、上移(需通过 hasMoveUp 开启)、下移(需通过 hasMoveDown 开启)

• inline, 行内编辑，数据编辑保存需要手动切换

  内置的操作有：删除、编辑(保存)、上移(需通过 hasMoveUp 开启)、下移(需通过 hasMoveDown 开启)

• dialog, 弹窗内编辑，数据编辑保存需要手动切换

  内置的操作有：删除、编辑、上移(需通过 hasMoveUp 开启)、下移(需通过 hasMoveDown 开启)

表单配置项(options)

与versa-form保持一致，增加如下属性: | 属性 | 说明 | 类型 | 默认值 | 是否必填 | | - | - | - | - | - | | width | 表格展示宽度，如果未指定则进行自适应 | String、Number | - | 否 | | fixed | 表格内固定：left、right | String | - | 否 | | itemAlign | 对齐方式: left/right/center | Array | false | 否 | | status | 全局编辑状态: edit,preview,disabled，如果未配置走 Repeater 组件的配置项 | String | - | 否 |

表单状态的说明

支持从三个维度进行表单状态的控制，满足大多数场景的表单状态需要：

• Repeater.status 全局的表单状态
• Repeater.rowStatus 单行的表单状态，因为每一行都是一个 form，这个就属于子 form 的全局状态
• Repeater.options.status 单个表单项的状态, 同versa-form

优先级顺序：Repeater.options.status > Repeater.rowStatus > Repeater.status

操作按钮(系列 hasXXX 属性)

每一行的操作按钮除开内置的逻辑，还可以通过actions属性进行增加，内置按钮逻辑可以通过hasXXX属性进行覆盖，如下所示，当存在id时候不展示删除按钮:

<VersaRepeater
    v-bind="repeatProps"
    :hasDelete="(values) => !values.id"
    v-model="formValues"
></VersaRepeater>

{
    repeatProps: {
        options: [
            {
                label: '单选框组',
                prop: 'radio-group',
                element: 'el-radio-group',
                mapSource: {
                    test1: '测试1',
                    test2: '测试2',
                    test3: '测试3'
                },
                width: 300,
                rules: [{ required: true }]
            },
        ]
    },
}

各类异步钩子(asyncHandler)

用于各类操作前的数据校准或者衍生逻辑, 每个函数通过返回Boolean或者{success: Boolean;results: Object}来覆盖内部逻辑。

• add 新增
• update 从预览态改为编辑态
• save 编辑保存
• remov 删除

如下所示新增时，调用接口获取详情：

<VersaRepeater
    v-bind="repeatProps"
    :hasDelete="(values) => !values.id"
    :asyncHandler="asyncHandler"
    v-model="formValues"
></VersaRepeater>

{
    repeatProps: {
        options: [
            {
                label: '单选框组',
                prop: 'radio-group',
                element: 'el-radio-group',
                mapSource: {
                    test1: '测试1',
                    test2: '测试2',
                    test3: '测试3'
                },
                width: 300,
                rules: [{ required: true }]
            },
        ]
    },
    asyncHandler: {
        update: async () => {
            const results = await requestSomthing();
            return {
                success: true,
                results
            }
        }
    }
}

编号和操作按钮的固定逻辑(fixedMode)

因为这两列数据为内置逻辑，如果需要调整其表格展示时的固定逻辑，可通过fixedMode参数来配置：

• 1(0b1) 编号左固定
• 2(0b10) 编号右固定
• 4(0b100) 操作左固定
• 8(0b1000) 操作右固定

内部使用二进制的模式来进行管控，所以入参必须按照上面的要求传递，若要通过控制 编号和操作列需要进行二进制加减，如编号左固定且操作右固定，那么 fixedMode=9