el+vue双向绑定table异常记录、string对象（json数据）的解析与重组（多k-v）动态表单

一、双向绑定table组件异常

说说问题：
在调接口获取到数据后直接给this.xxx双向绑定（即table中使用input组件v-model）没什么问题…
但是，我需要先动获取到的数组拿到里面的string对象(比如param: "{\"前缀\":\"xx\"}")，需要通过JSON.parse()解析出来，然后通过Object的keys()和values()获取到其中的k-v-----
正因如此，尝试了习惯的foreach、for...of，都导致绑定异常（异常是：在input输入数据后【无法看到输入什么】需要点击操作才会让它显现，而且一次只会有一个字符）

二、处理

经过漫长的时间，中间以为组件的问题（甚至尝试将table放到子组件中，没什么用）

• 最后使用普通的for循环带索引的（for...in）

• 请求时获取数据，解析string对象

this.xxx({}).then(res => {
          for (const i in res) {
            if(res[i].param) {
              const o = JSON.parse(res[i].param)
              const k = Object.keys(o)
              const v = Object.values(o)
              console.log(o, k[0]);
              res[i].key = k[0]
              res[i].value = v[0]
            }
          }
          this.list= res
        })

• 返回提交table数据，重新组装string对象，将其赋给参数

this.xxx.forEach(e => {
          if(e.param) {
            const key = e.key
          e.param = JSON.stringify({[key]: e.value})//这里
          }

        })
        console.log(this.optionalList);
        const data = {a: this.a, rules: this.list}
        this.xxxxx({data}).then(res => {
          this.$message.success('操作成功！')
        }).catch(e => {
          this.$message.error(e.msg)
        })

• 双向绑定成功！！！O(∩_∩)O哈哈~

三、JSON解析与重组（多k-v）

• 上面说过了单个的k-v解析与重组
  多k-v是因为用到了动态表单
  
• 动态的input，这个params是个数组（用于增减项）
• 页面代码

<div v-for="(item, index) in rInfo.params" :key="index">
          <my-input :name="`key${index}`"
                    :rules="{required:true, message:'参数key不能为空'}"
                    :label="`参数key${index+1}`"
                    width="65%">
          </my-input>
          <my-form-custom>
            <el-button @click="handleAdd(item, index)">增加</el-button>
            <el-button v-if="index>0" @click="handleRemove(item, index)">删除</el-button>
          </my-form-custom>
        </div>

• js，组成的动态表单

handleChange(model) {
        this.currentModel = model
      },
      handleAdd() {
        this.rInfo = this.currentModel
        this.rInfo.params.push({key: ''})
        this.rInfo.expression = '123'

      },
      handleRemove(item, index) {
        this.currentModel.params.splice(index, 1)
        this.rInfo = cloneDeep(this.currentModel)
      }

• 提交时的参数
  

重点是：解析动态输入框input的值，将其作为我们json数据的key

let obj = {}
for (const o of keys) {
          if(o.indexOf('key') > -1) {
            obj = Object.assign(obj, {[data[o]]: ''})
          }
        }

        data.param = JSON.stringify(obj)

• 其他地方的效果，在table中使用
  

见得的说就是：拿动态输入框的value拼到json的key上，
然后json的value设置空
就这样！o(>﹏<)o不要啊！！惨遭疯狂动态