更新记录

1.0.1（2023-10-20） 下载此版本

新增过多查询项时，自动换行功能

1.0.0（2023-07-20） 下载此版本

vue3 element-plus el-form的二次封装

平台兼容性

custom-form-v3

form表单的二次封装

vue3 element-plus el-form的二次封装

属性说明

使用示例

    //形式一
     <formCustom
        :data="searchHeaders"
        :bindProps="{ inline: true }"
        :ruleForm="searchRuleForm"
      ></formCustom>

    //形式二
     <formCustom
      :data="formHeaders"
      :bindProps="{ 'label-width': '124px', 'scroll-to-error': true }"
      v-model:formRef="formRef"
      :ruleForm="ruleForm"
    ></formCustom>

// setup 形式下
import { ref,active } from 'vue'
import formCustom from "@/components/custom-form-v3/searchForm"
const formProps = {
  style: {
    marginBottom: "0",
    marginRight: "16px",
  },
};
const searchRuleForm = reactive({}); //搜索的数据

const ruleForm = reactive({}); //表单的数据
const formRef = ref()
const searchHeaders = reactive([
    {
        formProps,
        render: () => {
        return (
            <div class="flex-d-r-center">
            <div
                class="db-primary-button flex-d-r-center"
                onClick={() => addTools()}
            >
                <span class="iconfont icon-style icon-left">
                &#xe62d;
                </span>
                新增
            </div>
            </div>
        );
        },
    },
    {
        formProps: {
            style: {
                flex: 1,
                "margin-bottom": 0,
            },
        },
    },
    {
        Component: "ElSelect",
        formProps,
        prop: "status",
        componentProps: {
            clearable:true,
            placeholder: "状态",
            style: {
                width: "101px",
            },
        },
        componentSlots: {
            default: () => {
                const data = [
                {
                    label: "进行中",
                    value: 1,
                },
                {
                    label: "已结束",
                    value: 2,
                },
                {
                    label: "未开始",
                    value: 3,
                },
                ];
                return data.map((item) => {
                    return (
                        <el-option
                        value={item.value}
                        label={item.label}
                        key={item.value}
                        ></el-option>
                    );
                });
            },
        },
    },
    {
        Component: "ElInput",
        formProps,
        prop: "title",
        componentProps: {
            placeholder: "请输入名称",
            style: {
                width: "205px",
            },
        },
    },
    {
        formProps: {
            style: {
                marginBottom: "0",
                marginRight: "0",
            },
        },
        render: () => {
            return (
                <div
                class="db-primary-button flex-d-r-center"
                onClick={() => searchRes()}
                >
                <span class="iconfont icon-style icon-left">
                    &#xe624;
                </span>
                查询
                </div>
            );
        },
    },
])

const formHeaders = reactive([
    {
        label:"时间",
        prop: "times",
        span: 24,
        defaultValue: "",
        Component: "ElDatePicker",
        on: {
            change: () => {},
        },
        componentProps: {
            type: "datetimerange",
            "value-format": "YYYY-MM-DD HH:mm:ss",
            format: "YYYY-MM-DD HH:mm:ss",
            rangeSeparator: "-",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            disabled: computed(() => isDisabled(1)),
            style:{
                width: '340px'
            }
        },
        formProps: {
            rules: {
                required: true,
                trigger: "blur",
                validator: (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入抢购时间"));
                }
                callback();
                },
            },
        },
    },
    {
        label: "名称",
        prop: "name",
        Component: "ElInput",
        defaultValue: "",
        componentProps: {
            placeholder: "名称需2-30个字符（汉字占两个字符）",
            style: {
                width: "540px",
            },
        },
        formProps: {
            rules: {
                required: true,
                trigger: "blur",
                // message: "请输入讲师名称",
                validator: (rule, value, callback) => {
                if(value === '') {
                    callback(new Error('请输入讲师名称'))
                }
                const len = strLength(value)
                if(len < 2 || len > 30) {
                    callback(new Error('讲师名称需2-30个字符'))
                }
                callback()
                }
            },
        },
    },
    {
        label: "状态",
        prop: "status",
        span: 24,
        Component: switchCons,
        defaultValue: 0,
        componentProps: {
            style: {
                width: "540px",
            },
        },
        formProps: {
            rules: {
                required: true,
                trigger: "blur",
            },
        },
    },
])

const isDisabled = (type) => {
  const obj = {
    1: [1],
    2: [1,3]
  }
  return obj[type].includes(ruleForm.status)
}

const saveForm = () => {
  formRef.value.validate(async (valid) => { // 提交数据时验证表单
    if(valid) {

    }
  })
};

const addTools = () => {
  router.push({
    path: "/add"
  });
};
const searchRes = () => {
  useTableRef.value.getRequestRes("firstPage"); //刷新表格
};

//也可以注册到全局 页面中直接使用不需要import
// main.ts文件
import App from '@/App.vue'
import formCustom from "@/components/custom-form-v3/searchForm"
const app = createApp(App)
app.component('formCustom', formCustom)

效果图