heyi-form v1.0.0

heyi-table

基于element UI 表单组件

Build Setup

# 安装方式
npm i heyi-form -S

# 表单校验说明
目前校验存在问题，已经移除，后续会加

# 引入
import hytable from 'heyi-form'
Vue.use(hytable.formCommon)

# 使用方式
 <hyForm :form='demo' :searchForm="itemDemo" @handleBtnClick="handleBtn"  />

# 参数说明
 表单数据
 demo: {
    checkBoxDemo: [],//存在多选时必填
    },

# 使用示例
itemDemo: [
                {
                    type: "input", //输入框类型
                    label: "姓名", //标题名
                    prop: "name", //对应字段
                    colSpan: 24, //单行宽度
                    placeholder: "我是输入框", //提示占位符
                    clearable: true,
                },
                {
                    type: "input",
                    label: "电话",
                    prop: "phone",
                    colSpan: 24,
                    placeholder: "请输入手机号",
                    clearable: true,
                },
                {
                    type: "select",
                    label: "测试下拉",
                    prop: "selectDemo",
                    colSpan: 24,
                    // 多选框数据
                    options: [
                        { label: "男", value: "M" },
                        { label: "女", value: "F" },
                    ],
                    multiple: false, //是否可多选
                    clearable: true, //是否可清楚
                    //触发事件
                    change: (e) => {
                        console.log(e);
                    },
                },
                {
                    type: "date", //时间选择器类型，可选值：日期：date；时间：time；日期时间：datetime
                    label: "时间",
                    prop: "dateDemo",
                    colSpan: 24,
                },
                {
                    type: "switch",
                    label: "开关",
                    prop: "switchDemo",
                    activeValue: 0, //选中（打开）状态
                    inactiveValue: 1, //未选中（未打开）状态
                    colSpan: 24,
                    change: (e) => {
                        console.log(e);
                    },
                },
                {
                    type: "radio",
                    label: "单选",
                    prop: "radioDemo",
                    radios: [
                        {
                            label: "测试1",
                            value: 0,
                        },
                        {
                            label: "测试2",
                            value: 1,
                        },
                        {
                            label: "测试3",
                            value: 2,
                        },
                    ],
                    colSpan: 24,
                },
                {
                    type: "Checkbox",
                    label: "多选",
                    prop: "checkBoxDemo", //注意：在使用checkBox时，此处绑定字段需要先在表单数据中定义类型为数组
                    checkboxs: [
                        { label: "测试1", value: "0" },
                        { label: "测试2", value: "1" },
                    ],
                    colSpan: 24,
                },

                {
                    type: "btns",
                    label: "",
                    prop: "",
                    //按钮组
                    btns: [
                        {
                            name: "提交按钮", //按钮名称
                            clickType: "submit", //触发事件，可用于判断提交还是重置等
                            btnSize: "mini", //按钮尺寸
                            btnType: "success", //按钮类型
                        },
                        {
                            name: "返回按钮",
                            clickType: "goback",
                            btnSize: "mini",
                            btnType: "waring",
                        },
                    ],
                },
            ],

For detailed explanation on how things work, consult the docs for vue-loader.