直接上代碼 :prop 和prop 都可以，vue2和vue3或者是element、elementplus都可以用
table文章來源：http://www.zghlxwxcb.cn/news/detail-620168.html
<template>
<div class="page page-table">
<section class="page-query-form">
<breadcrumb :hasLine="false" />
</section>
<div class="table-content" style="height:calc(100% - 70rem)">
<el-form label-position="top" ref="ruleForm" label-width="80px" :model="formData">
<div class="type-name">
<span>人員信息</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="人員姓名" :prop="'clientStaffVo.name'" :rules="rules.name">
<el-input size="small" v-model="formData.clientStaffVo.name" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="人員性別" :prop="'clientStaffVo.sex'" :rules="rules.sex">
<el-radio-group v-model="formData.clientStaffVo.sex">
<el-radio label="1">男</el-radio>
<el-radio label="0">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="聯(lián)系電話" prop="clientStaffVo.phone" :rules="rules.phone">
<el-input size="small" v-model="formData.clientStaffVo.phone" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="身份證號(hào)" prop="clientStaffVo.cardId" :rules="rules.cardId">
<el-input size="small" v-model="formData.clientStaffVo.cardId" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="工作單位" prop="clientStaffVo.unit" :rules="rules.unit">
<el-input size="small" v-model="formData.clientStaffVo.unit" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="上傳身份證" prop="clientStaffVo.cardUpload" :rules="rules.cardUpload">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUpload' fieldName='cardUpload' prefix='cardUpload' text="身份證人像面"></IDCardUploader>
<!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份證國(guó)徽面"></IDCardUploader> -->
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item :label="'身份證國(guó)徽面'" prop="clientStaffVo.cardUploadOpposite" :rules="rules.cardUploadOpposite">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份證國(guó)徽面"></IDCardUploader>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="上傳駕駛證" prop="id">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUpload' fieldName='drivingUpload' prefix='drivingUpload' text="上傳駕駛證"></IDCardUploader>
<!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上傳駕駛證副業(yè)"></IDCardUploader> -->
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="上傳駕駛證副業(yè)" prop="id">
<div class="file-box">
<IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上傳駕駛證副業(yè)"></IDCardUploader>
</div>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>來訪車輛信息</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="車牌號(hào)碼">
<el-input size="small" v-model="formData.clientCarVo.licensePlateNum" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="隨行人數(shù)">
<el-select size="small" v-model="formData.clientCarVo.num" placeholder="請(qǐng)選擇">
<el-option v-for="item in dictMapList.numList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>預(yù)約時(shí)間</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="預(yù)計(jì)進(jìn)企時(shí)間" prop="gmtInto" :rules="rules.gmtInto">
<el-date-picker size="small" :picker-options="startPickerOptions" v-model="formData.gmtInto" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="選擇日期時(shí)間">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="預(yù)計(jì)離企時(shí)間" prop="gmtLeave" :rules="rules.gmtLeave">
<el-date-picker size="small" :picker-options="endPickerOptions" v-model="formData.gmtLeave" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="選擇日期時(shí)間">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<div class="type-name">
<span>訪問事由</span>
</div>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="被訪企業(yè) " prop="enterprise" :rules='rules.enterprise'>
<el-select size="small" v-model="formData.enterprise" placeholder="請(qǐng)選擇">
<el-option v-for="item in dictMapList.enterpriseList" :key="item.id" :label="item.label" :value="item.id" @click.native="checkedenterprise(item)">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被訪人員" prop="name" :rules="rules.name">
<el-input size="small" v-model="formData.name" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被訪人電話" prop="phone" :rules="rules.phone">
<el-input size="small" v-model="formData.phone" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="被訪人部門" prop="departmentId" :rules="rules.departmentId">
<el-input size="small" v-model="formData.departmentId" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="來訪事由" prop="reasons" :rules="rules.reasons">
<el-input size="small" v-model="formData.reasons" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="btns">
<el-button type="primary" @click="handleConfirm">提交預(yù)約</el-button>
<el-button plain @click="handlerest">重置</el-button>
</div>
</div>
</div>
</template>
<script>
import Amap from '@/components/amap/index.vue';
import breadcrumb from '@/components/breadcrumb/index.vue';
import * as config from '@/common/env.json';
import IDCardUploader from '@/components/id-card-uploader/id-card-uploader.vue';
export default {
components: { breadcrumb, Amap, IDCardUploader },
data() {
return {
rules: {
name: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
sex: [
{ required: true, message: '請(qǐng)選擇', trigger: ['blur', 'change'] },
],
phone: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['mobile'] }
],
cardId: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['id'] }
],
unit: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
gmtInto: [
{ required: true, message: '請(qǐng)選擇', trigger: ['blur', 'change'] },
],
gmtLeave: [
{ required: true, message: '請(qǐng)選擇', trigger: ['blur', 'change'] },
],
enterprise: [
{ required: true, message: '請(qǐng)選擇', trigger: ['blur', 'change'] },
],
name: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
phone: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['mobile'] }
],
departmentId: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
reasons: [
{ required: true, message: '請(qǐng)輸入', trigger: ['blur', 'change'] },
{ validator: this.validation, check: ['empty', 'blank'] }
],
cardUpload: [
{ required: true, message: '請(qǐng)上傳', trigger: ['blur', 'change'] },
],
cardUploadOpposite: [
{ required: true, message: '請(qǐng)上傳', trigger: ['blur', 'change'] },
],
},
dictMapList: {
numList: [
{ label: '1人', value: 1 },
{ label: '2人', value: 2 },
{ label: '3人', value: 3 },
{ label: '4人', value: 4 },
{ label: '5人', value: 5 },
{ label: '6人', value: 6 },
{ label: '8人', value: 8 },
{ label: '9人', value: 9 },
{ label: '10人', value: 10 },
{ label: '15人', value: 15 },
],
enterpriseList: [],
areaList: [],
},
formData: {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
},
}
},
created() {
this.getTyep().then(() => {
if (this.$route.query.id) {
this.getInfo()
}
})
},
methods: {
startPickerOptions: {
disabledDate(time) {
return time.getTime() < (Date.now() - 3600 * 1000 * 24)
},
selectableRange: '00:00:00 - 23:59:59',
},
checkedenterprise(item) {
this.formData.clientCarVo.socialCode = item.value;
this.formData.clientStaffVo.socialCode = item.value;
},
getInfo() {
this.$api.apiClientStaffSubscribeInfo({ id: this.$route.query.id }).then((res) => {
if (res.success) {
this.formData = res.data;
this.formData.enterprise=Number(this.formData.enterprise)
}
})
},
uploadDone(val, fileName) {
this.formData.clientStaffVo[fileName] = val;
this.$refs.ruleForm.validate();
},
async getTyep() {
await this.$api.apiDictSelectDictMap({ key: 'industrial_area,economic_trade' }).then((res) => {
if (res.success) {
this.dictMapList.areaList = res.data.industrial_area;
this.dictMapList.economicTrade = res.data.economic_trade;
};
})
this.dictMapList.enterpriseList = await this.$api.apiSelectEnterpriseInfoNames({ name: null }).then(res => {
return res.data.map(i => {
return {
id: i.id,
value: i.socialCreditCode,
label: i.enterpriseName,
}
})
});
},
handlerest() {
this.$confirm('', {
dangerouslyUseHTMLString: true,
message: `<h2>操作確認(rèn)</h2><span>該操作不可逆，是否確認(rèn)重置填寫的數(shù)據(jù)？</span>`,
confirmButtonText: '確定',
cancelButtonText: '取消',
showClose: false,
type: 'warning',
}).then(() => {
if (this.$route.query.id) {
this.getInfo();
} else {
this.formData = {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
};
this.$refs.ruleForm.resetFields();
}
})
},
async handleConfirm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
let params = JSON.parse(JSON.stringify(this.formData));
if (this.$route.query.id) {
this.$api.apiClientStaffSubscribeUpdate(params).then((res) => {
if (res.success) {
this.$notify({
title: '操作成功',
message: '數(shù)據(jù)提交成功',
type: 'success',
duration: 1000,
position: 'top-left',
});
}
})
} else {
this.$api.apiClientStaffSubscribeSave(params).then((res) => {
if (res.success) {
this.$notify({
title: '操作成功',
message: '數(shù)據(jù)提交成功',
type: 'success',
duration: 1000,
position: 'top-left',
});
this.formData = {
clientCarVo: {
carType: null,
rsqasUpload: null,
num: null,
travelUpload: '',
travelUploadOpposite: '',
},
clientStaffVo: {
cardId: null,
cardUpload: '',
cardUploadOpposite: '',
drivingUpload: '',
drivingUploadOpposite: '',
name: null,
phone: null,
sex: null,
unit: null,
},
};
this.$refs.ruleForm.resetFields();
}
})
}
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style lang="less" scoped>
.table-content{
.scrollbar();
}
.type-name{
span{display: inline-block;border-bottom: 2px solid#409EFF; padding: 5px 0;}
}
.btns{ text-align: center;}
.file-box{ display: flex; justify-content: space-around;}
</style>
form:文章來源地址http://www.zghlxwxcb.cn/news/detail-620168.html
到了這里，關(guān)于element 表單驗(yàn)證 深層驗(yàn)證綁定的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
