[vue] 简单的数组对象去重

最新推荐文章于 2024-04-24 19:02:49 发布
最新推荐文章于 2024-04-24 19:02:49 发布
阅读量206 收藏 1
点赞数
文章标签： vue javascript html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34450741/article/details/117966632
版权

一、点击黄色背景文字，然后控制台（F12）看效果，每个只可以添加一次。

在这里插入图片描述
在这里插入图片描述

二、全部html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column label="配送信息">
          <el-table-column prop="name" label="姓名">
            <template slot-scope="scope">
              <div
                style="background-color: yellow"
                @click="onRowClick('配送信息-姓名', 'name',scope.row.id)"
              >
                {{scope.row.name}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="province" label="省份">
            <template slot-scope="scope">
              <div
                style="background-color: yellow"
                @click="onRowClick('配送信息-省份', 'province',scope.row.id)"
              >
                {{scope.row.province}}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="city" label="市区">
            <template slot-scope="scope">
              <div
                style="background-color: yellow"
                @click="onRowClick('地址-市区', 'city',scope.row.id)"
              >
                {{scope.row.city}}
              </div>
            </template></el-table-column
          >
          <el-table-column prop="address" label="地址"
            ><template slot-scope="scope">
              <div
                style="background-color: yellow"
                @click="onRowClick('地址-地址', 'address',scope.row.id)"
              >
                {{scope.row.address}}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            tableData: [
              {
                date: "2016-05-03",
                name: "王小虎",
                province: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                id: 11,
              },
              {
                date: "2016-05-02",
                name: "王小虎",
                province: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                id: 22,
              },
              {
                date: "2016-05-04",
                name: "王小虎",
                province: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                id: 33,
              },
              {
                date: "2016-05-01",
                name: "王小虎",
                province: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                id: 44,
              },
              {
                date: "2016-05-08",
                name: "王小虎",
                province: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                id: 55,
              },
            ],
            list: [],
          };
        },
        methods: {
          // 数组对象去重
          onRowClick(label, value, id) {
            /*方法一：*/
            for (let i in this.list) {
              if (this.list[i].value === value && this.list[i].id === id) {
                return false;
              }
            }

            /*方法二：*/
            // const some = this.list.some(
            //   (v) => v.value === value && v.id === id
            // );
            // if (some === true) return false;

            /*方法三：*/
            // const filter = this.list.filter(
            //   (v) => v.value === value && v.id === id
            // );
            // if (filter.length > 0) return false;
            this.list.push({ label, value, id });
            console.log(this.list);
          },
        },
      });
    </script>
  </body>
</html>
lyt-top
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
可以通过上次的需求，我们通过 TYPE 和 REMARK 两个 key 对应的 value 共同决定是否合并属性，我们是可以将两个属性进行串联成一个新的 key，如果这个 key 相同，即两个条件同时满足。这里不仅仅合并相邻的数据，不...
js数组中存对象,根据对象的属性进行去重
04-25
在进行web项目开发的时候,有时候需要把一些前端的数组进行去重处理,得到一个去重后的数据,然后在进行相关的操作
vue数组对象去重
qq_45093219的博客
06-23 1万+
vue数组对象合并去重；Es6的Map
Vue中数组进行去重的几种常用方法
beyond520lin的博客
07-05 7091
1、使用Set数据结构：这是ES6中引入的新数据结构，它只能存储唯一的值。你可以将数组转换为Set，然后再将Set转换回数组。2、使用filter()方法：通过使用indexOf方法来保留首次出现的元素，去掉重复的元素。3、使用reduce()方法：通过使用一个空数组和includes()方法来添加不重复的元素。
【前端】vue数组去重的3种方法
最新发布
weixin_43366051的博客
04-24 1388
前端使用场景中，经常会遇到数组去重的场景，本文主要介绍了vue常见的几种数组去重方法。
Vue中如何对数组进行去重？
SR003的博客
07-31 3148
Vue中对包含多个对象的数组，或普通数组进行去重！
vue中对象数组去重的实现
10-15
主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 数组对象去重（去掉之前数据，去掉之后数据）
路虽远行则将至，事虽难做则必成。
07-12 1912
数据去重是对数据的一种处理使用，对于前端来说有时候需要自己操作数据来简化操作数组去重情况，保留第一次加入数据（去重后面），保留最后一次加入数据（去重前面）保留第一次的数据，是判断下一次加入数据的id在数组是否存在，存在过滤抛弃保留最后一次加入数据，是判断加入时候数组存在要加入数据id，把数组里面数据删除不管是哪一种情况都是通过数组方法可以实现的，但建议用写好的，不容易出错，代码简洁。
前端vue二维数组解析
09-12
通过vue解析表头合并的表格，后台返回的数据格式为[{name:aa,list:[{value:100}]}] 通过table与v-for组合循环数据达到目的。 vue 表头合并数据解析 vue 二维数组解析 vue 二维list解析 vue table+v-for
12种解决数组去重的方案
web前端开发
08-25 674
兜个小圈 先总结一下我们数组的方法：poppushshiftunshiftslicesplicesortreverseconcotjoinindexOflastIndexOfmapfor...
vue数组去重
梦之归途的博客
08-26 2829
对于简单的数组进行去重，可以使用Set。，基本上可以对所有数据类型进行去重。
vue数组去重2种方法
热门推荐
IT博客技术分享
09-29 4万+
方法一： 用2个for循环，判断每一项的id， 案列： // that.positions.map(train=>{ // that.new_Positions.push( train.trainId) // ...
Vue数组中对象去重
灰海
11-14 136
Vue数组对象去重
vue js 数组对象去重方法
weixin_43285861的博客
01-26 2364
for(let item of this.infoListChecked){ this.keywordForm.excludeAuthorWords.push({firstWord:item.valueName,secondWord:this.excludeAuthorWords}); let obj = {}; let reduce = this.keywordForm.excludeAuthorWords.reduce((cur, next) => { obj[next.secondWo.
(vue)数组对象去重
nyf_unknow的博客
08-16 271
代码】(vue)数组对象去重。
axios @0.20.0版本delete方法遇到的问题
weixin_48101702的博客
10-04 594
axios别名方式调用delete，无法获取data参数无效方法可用方法其他方法 无效方法 axios.delete('/delete',{ data: { id: 12 } }).then((res)=>{ console.log(res) }) 可用方法 axios({ method: 'delete', url: '/delete', data: data }).then(res=>{ console.log(res) }) 其他方法 卸载0.20.0版axios，安装0.19.0版 .
vue 列表数据操作（去重、筛选、赋值）
weixin_43937851的博客
07-27 5586
vue 列表数据操作（去重、筛选、赋值）
vue 数组对象去重
08-19
- *2* *3* [vue数组去重 数组对象去重](https://blog.csdn.net/z1010017573/article/details/110918943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值