需求:
根据接口返回的用户数据来展示数组
选中时可以编辑
添加数组到数组
取消时删除
展示效果
接口返回数据结构
let list = [{
'Shrh_Nm':'王六七','Ivsr_MblPh_No':'13100000000'},{
'Shrh_Nm':'里斯三','Ivsr_MblPh_No':'15800000000'}];
整体看一下代码
<template>
<div class="container">
<div class="a01">
<div class="b01">
<div class="c02">资料提交</div>
</div>
</div>
<div class="main">
<div class="list" v-for="(item,index) of multiArr" :key="index">
<div class="select">
<van-checkbox v-model="item.checked" @change="changeSelect($event,item.checked)"></van-checkbox>
</div>
<div class="content">
<div class="data">
<span class="lf">客户姓名</span>
<span class="rg"><input type="text" placeholder="" v-model="item.Shrh_Nm" readonly></span>
</div>
<div class="data">
<span class="lf">手机号码</span>
<span class