動態拖拽編輯表單,後端不提供對象和id

前段時間，公司要作一個自定義的表單，可是後端設計不提供給前端id和對象，要動態編輯表， 效果圖以下：

設計需求是：左邊的表單項經過拖拽可到中間的模型區域，中間的區域可自由拖拽，以此改變列表順序，點擊每一個item。能夠進行右邊的表單動態編輯，其中拖拽是引用的 vueDraggable ，然後臺的數據接口是：

[{
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來進行一一對應，在項目開發中，很是不建議這麼操做，可是我在長沙，長沙人民的開發思惟我很無奈。