vue 实现checkbox选中，在上面显示选中的数据，删除取消选中并删除显示的数据...

最新推荐文章于 2024-06-10 20:05:20 发布

梁小茹

最新推荐文章于 2024-06-10 20:05:20 发布

阅读量3.2k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46653486/article/details/128283861

版权

页面实现效果：
在这里插入图片描述
看代码实现步骤：

<div style="display: flex; align-items: center">
    <span style="margin-right: 10px; color: #c0c0c0"
          >已勾选:</span
      >
      <span class="selectData">
          <el-tag
              class="tabMargin"
              :disable-transitions="true"
              v-for="(item, index) in titleList"
              :key="index"
              closable
              @close="bigCheckedClosed(item, index)"
              >{
  { item.title }}</el-tag
          >
      </span>
  </div>

//  这部分是下面勾选的数据及展示内容
<div
     class="contentBox"
     v-for="(item, index) in tableData"
     :key="index"
 >         
             //主要是实现点击展示这块的逻辑