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

目录

formatFormData

JSON解析和生成

加载（请求前，await后） 

formComp

---

formatFormData

  formData: any = {
    confmNm: "", // string 数据确认版本名称
    moduleDataType: [], // string 包含数据类型  非必填
    applyType: 1, // integer 适用人群
    applyOa: [], // string OA
    applyTeamAttr: [], // string 团队属性  
    applyManagerLevel: [], // string 管理级别
    taskContent: {},//object 任务确认配置
    scoreContent: {},//object 业绩确认配置
    otherContent: {}//object 其他数据确认配置
  }

后端数据格式

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

但获取后端返回的数据时，可能为空的且后续需要直接引用其方法/属性时，要赋初值

  // 模块详情
  confirmpageGet() {
    this.detailLoading = true
    API.getQuery(this.releId).then((res: any) => {
      if (res && res.code == 200) {
        this.formData = res.data
        if(!this.formData.moduleDataType){
          this.formData.moduleDataType=[]
        }
      }
    }).catch((e: any) => {
      this.$message.error(e && e.msg)
    }).finally(() => {
      this.detailLoading = false
      if (this.formData.moduleDataType.includes(2)) this.$refs.taskContent.formData = this.formData.taskContent;
      if (this.formData.moduleDataType.includes(1)) this.$refs.scoreContent.formData = this.formData.scoreContent;
      if (this.formData.moduleDataType.includes(3)) this.$refs.otherContent.formData = this.formData.otherContent;
    })
  }

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后） 

 
...
export default class extends Vue {
  detailLoading: boolean = false

//查看
  getQuery() {
    this.detailLoading = true
    API.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 = true
          item.taskIndex = {
            id: item.taskIndexCode,
            indexNm: item.taskIndexName
          }
        })

        this.formData.indexContent = indexContent
        await this.baseIndexQuaryScoreIndex(this.formData.applyType === 1 ? 'oa' : 'team')
        this.detailLoading = false
      }
    })
  }
}

formComp