前端构造数据格式及表格添加行

一、前端构造数据格式

state中的values默认定义为[{address}]格式
// state.values本身数据格式为：[{"address": "1"},{"address": "2"}
]
// 前端传递给后端的数据格式为：
["1","2","3"
]
// 通过以下的内容取出address的值传递给后端
list: state.values.map(item => item.address),// 后端传递回来的数据格式也为：
["1","2","3"
]
// 前端渲染后端的数据格式时发现绑定在表格里的数据格式为state.values.address，即格式为：
[{"address": "1"},{"address": "2"},{"address": "3"}
]
// 前端解析数据并且绑定到表格中：
query().then(data=>{const {address} = data// list为前端定义的数组，后端data为obj，前端需要[]，则将[data]就能得到一个数组state.list = [data]if（address === null）returnelse{// 往["1","2","3"]中添加address字段，前端表格再通过address中拿去数据[{"address": "1"},{"address": "2"},{"address": "3"}]state.values = address.map(addr=>({address: addr}))}
})

二、表格添加行

  <el-row><el-form :model="addressValues"><divv-for="(item, index) in addressValues.items":key="item.key"class="range-form-item"><el-space :size="8"><el-form-item:label="t('pmsLimitRule.address')":prop="`items.${index}.address`"><el-input v-model="item.address" /></el-form-item><el-buttonv-if="index !== 0"type="danger"icon="Delete"circle@click="deleteAddress(index)"/></el-space></div><el-buttontype="primary"icon="Plus"style="margin-left: 10px;"@click="addAddress">{{ t('actions.addAddress') }}</el-button></el-form></el-row>function addAddress() {let counter = 0;const rangeKey = ++counter;state.addressValues.items.push({key: rangeKey.toString(),address: '',});}function deleteAddress(index) {state.addressValues.items.splice(index, 1);}