VUE+vant 实现多选编辑取消多选功能

最新推荐文章于 2024-05-23 14:28:21 发布

Lucky宝宝

最新推荐文章于 2024-05-23 14:28:21 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/lucky_ax/article/details/119997104

版权

需求:
根据接口返回的用户数据来展示数组
选中时可以编辑
添加数组到数组
取消时删除
展示效果
在这里插入图片描述
接口返回数据结构

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