前段时间，公司要做一个自定义的表单，但是后端设计不提供给前端id和对象，要动态编辑表， 效果图如下：

[{title: `${title}`,tip: `${tip}`,inputType: `${inputType}`,isBuildIn: false,required: false,options: ['a', 'b', 'c'], // 选项maxLength: "",unit: "",isDateTime: "",isSingleSelect: ""},...]复制代码

其中选择框下面的选项卡是属于动态添加，删除。 如果后台给定options里面拿过来的数据是下面这种形式。那么vue的双向绑定就可以直接关联实现。

[{id: 1, val: 'aaa'}, {id: 2, val: 'bbb'}]复制代码

由此我要想办法在渲染的时候自己手动将options内的字符串遍历之后生成对象，再在页面进行展示，在提交的时候，又将对象里面的val值push到表单数据的options里面。但是options不是所有的表单数据都有值，在比对赋值时，完全根据index来生成数据，那么回填的问题就解决了。

下面是新增的时候，怎么生成数据来展示，以index同样的思路，我们在拖拽左边的list到中间模型的时候，不管是有optins选项的还是没有的options选项，我们需要一个空数组来进行标记，否则我的index就会查找失败。而在有options时，我们点击新增的时候，此时我们就必须选择到相对应的options的二维数组里面的子数组进行数据的绑定。由此才能一一对应

我们渲染的数据是一个二维数组，根据index来进行一一对应，在项目开发中，非常不建议这么操作，但是我在长沙，长沙人民的开发思维我很无奈。