vue 表单form-item模板（编辑，查看，新建）

目录

formatFormData

后端数据格式​编辑

JSON解析和生成

加载（请求前，await后） 

formComp

---

formatFormData

后端数据格式

为空的，可以直接不提交/提交null/undefined 

JSON解析和生成

var str = '{"name": "参宿","id":7}';      //'JSON字符串'
var obj = JSON.parse(str);                //JSON.parse(str)
console.log(obj);                       //JSON的解析（JSON字符串转换为JS对象）
//Object { name: "参宿", id: 7 }
var jsonstr = JSON.stringify(obj);        //JSON.stringify(obj)
console.log(jsonstr);                     //JSON的生成（JS对象转换为JSON字符串）JSON.parse(text[, reviver])//reviver函数参数，修改解析生成的原始值，调用时机在 parse 函数返回之前。
//k：key，v：value
JSON.parse('{"p": 5}', function (k, v) {if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }//从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，// 最后一个属性名会是个空字符串。return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});// 1
// 2
// 4
// 6
// 5
// 3
// ""

加载（请求前，await后） 

 <mds-loading :isLoading="detailLoading" type="ball-pulse" loadingText="正在努力加载中" />
...
export default class extends Vue {detailLoading: boolean = false//查看getQuery() {this.detailLoading = trueAPI.getQuery(this.$route.params.releId).then((res: any) => {if (res && res.code == 200) {}}).catch((e: any) => {this.$message.error(e && e.msg)}).finally(() => {this.detailLoading = false})}//编辑getQuery1() {API.getQuery1(this.$route.params.releId).then(async (res: any) => {if (res && res.code == 200) {const indexContent = JSON.parse(res.data.indexContent)indexContent.index.forEach((item: any) => {item.open = trueitem.taskIndex = {id: item.taskIndexCode,indexNm: item.taskIndexName}})this.formData.indexContent = indexContentawait this.baseIndexQuaryScoreIndex(this.formData.applyType === 1 ? 'oa' : 'team')this.detailLoading = false}})}
}

formComp

<template><mds-form :model="formData" :rules="rules" ref="formData"><mds-form-item label="确认方式" prop="confmMode" :required="true"><mds-select v-model="formData.confmMode" style="width: 480px" placeholder="请选择" :disabled="disabled" clearablefilterable><mds-option v-for="item in CONFM_MODE" :value="item.id" :label="item.label" /></mds-select></mds-form-item><mds-form-item label="确认周期" prop="confmCycle" :required="true"><mds-select v-model="formData.confmCycle" style="width: 480px" placeholder="请选择" :disabled="disabled" clearablefilterable><mds-option v-for="item in CONFM_CYCLE" :value="item.id" :label="item.label" /></mds-select></mds-form-item><mds-form-item label="可确认时间" prop="confmTm" :required="true" class="confmTm-form-item"><mds-select :class="{ 'validate-success': formData.confmTm }" v-model="formData.confmTm" style="width: 230px"placeholder="请选择" :disabled="disabled" clearable filterable><mds-option v-for="item in CONFM_TM" :value="item.id" :label="item.label" :disabled="isDisabledTm(item)" /></mds-select><mds-select :class="{ 'validate-success': (formData.confmTmRange[0] > 0) }" v-model="formData.confmTmRange[0]"style="width: 105px" placeholder="开始日期" :disabled="disabled" clearable no-match-text='暂无日期' filterable><mds-option v-for="item in CONFM_TM_RANGE" :value="item" :label="item + '号'":disabled="isDisabledStart(item)" /></mds-select>至<mds-select :class="{ 'validate-success': (formData.confmTmRange[1] > 0) }" v-model="formData.confmTmRange[1]"style="width: 105px" placeholder="结束日期" :disabled="disabled" clearable no-match-text='暂无日期' filterable><mds-option v-for="item in CONFM_TM_RANGE" :value="item" :label="item + '号'":disabled="isDisabledEnd(item)" /></mds-select></mds-form-item><mds-form-item label="提醒频率" prop="remindFrequency" :required="true"><mds-select v-model="formData.remindFrequency" style="width: 480px" placeholder="请选择" :disabled="disabled"clearable filterable><mds-option v-for="item in REMINDE_FREQUENCY" :value="item.id" :label="item.label" /></mds-select></mds-form-item></mds-form>
</template><script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { CONFM_MODE, CONFM_CYCLE, CONFM_TM, REMINDE_FREQUENCY, CONFM_TM_RANGE } from '@/utils/formComp'
@Component({components: {}
})export default class formComp extends Vue {@Prop({ required: true }) private disabled!: booleandata() {return {CONFM_MODE: CONFM_MODE,CONFM_CYCLE: CONFM_CYCLE,CONFM_TM: CONFM_TM,REMINDE_FREQUENCY: REMINDE_FREQUENCY,CONFM_TM_RANGE: CONFM_TM_RANGE,pickerOptions: {disabledDate(confmTm: Date) {return confmTm.getTime() < Date.now()}},formData: {confmMode: 1,confmCycle: "",confmTm: "",remindFrequency: "",confmTmRange: []}}}//单向绑定数据，主数据改变，则子数据清空@Watch('formData.confmCycle')handleChangeConfmCycle(newV: any, oldV: any) {if(newV!=oldV){this.formData.confmTm=""}}rules = {confmMode: [{ required: true, message: '请选择确认方式', trigger: ['blur', 'change'] }],confmCycle: [{ required: true, message: '请选择确认周期', trigger: 'change' }],confmTm: [{ required: true, validator: this.confmTmValidator, trigger: ['blur', 'change'] }],remindFrequency: [{ required: true, message: '请选择提醒频率', trigger: ['blur', 'change'] }],}//同一个提示位置confmTmValidator(rule: any, value: any, callback: any) {if (!value || value.length === 0) {callback(new Error('请选择可确认时间'))//从未选过||选完又取消时会存在值} else if (this.formData.confmTmRange.length < 2 || this.formData.confmTmRange[1] <= 0 || this.formData.confmTmRange[0] <= 0) {callback(new Error('请选择可确认时间范围'))} else {callback()}}submit() {var isValid;//判断表单数据是否有效this.$refs.formData.validate((valid: any) => {isValid = valid;})return isValid;}//双向绑定数据isDisabledStart(item: number) {//选完又取消return this.formData.confmTmRange[1] > 0 && item > this.formData.confmTmRange[1];}isDisabledEnd(item: number) {return this.formData.confmTmRange[0] > 0 && item < this.formData.confmTmRange[0];}//单向绑定数据isDisabledTm(item: { id: number, label: string }) {if (this.formData.confmCycle === 3 && item.id != 2) return true;}
}</script><style lang="scss" scoped>
::v-deep .mds-form-item-content {width: 480px;display: flex;justify-content: space-between;flex-wrap: nowrap;
}::v-deep .validate-success .mds-input {border-color: #d8dce6 !important;
}
</style>