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

form表单的二次封装

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

属性说明

属性名	类型	默认值	说明
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">
				&#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)