form表單的二次封裝

vue3 element-plus el-form的二次封裝文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-539787.html

屬性說(shuō)明

使用示例

	//形式一
	 <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({}); //搜索的數(shù)據(jù)

const ruleForm = reactive({}); //表單的數(shù)據(jù)
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: "狀態(tài)",
			style: {
				width: "101px",
			},
		},
		componentSlots: {
			default: () => {
				const data = [
				{
					label: "進(jìn)行中",
					value: 1,
				},
				{
					label: "已結(jié)束",
					value: 2,
				},
				{
					label: "未開(kāi)始",
					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: "請(qǐng)輸入名稱",
			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:"時(shí)間",
		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: "開(kāi)始時(shí)間",
			endPlaceholder: "結(jié)束時(shí)間",
			disabled: computed(() => isDisabled(1)),
			style:{
				width: '340px'
			}
		},
		formProps: {
			rules: {
				required: true,
				trigger: "blur",
				validator: (rule, value, callback) => {
				if (value === "") {
					callback(new Error("請(qǐng)輸入搶購(gòu)時(shí)間"));
				}
				callback();
				},
			},
		},
  	},
	{
		label: "名稱",
		prop: "name",
		Component: "ElInput",
		defaultValue: "",
		componentProps: {
			placeholder: "名稱需2-30個(gè)字符（漢字占兩個(gè)字符）",
			style: {
				width: "540px",
			},
		},
		formProps: {
			rules: {
				required: true,
				trigger: "blur",
				// message: "請(qǐng)輸入講師名稱",
				validator: (rule, value, callback) => {
				if(value === '') {
					callback(new Error('請(qǐng)輸入講師名稱'))
				}
				const len = strLength(value)
				if(len < 2 || len > 30) {
					callback(new Error('講師名稱需2-30個(gè)字符'))
				}
				callback()
				}
			},
		},
  	},
	{
		label: "狀態(tài)",
		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) => { // 提交數(shù)據(jù)時(shí)驗(yàn)證表單
    if(valid) {
      
    }
  })
};

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


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

到了這里，關(guān)于vue3 element-plus el-form的二次封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！