form表单的二次封装文章来源：https://www.toymoban.com/news/detail-539787.html
vue3 element-plus el-form的二次封装文章来源地址https://www.toymoban.com/news/detail-539787.html
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | Array | [] | 页面展示数据内容 |
| onChange | Function | false | 表单事件 |
| bindProps | Object | {} | 表单属性 |
| formRef | Object | {} | 表单ref |
| ruleForm | Object | {} | 数据 |
使用示例
//形式一
<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">

</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">

</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)
到了这里，关于vue3 element-plus el-form的二次封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
