Vue 比较两个数组对象,页面展示差异数据值

需求:

页面要展示出被删除和添加的数据,知道哪些被删除和新添加的数据!如下图:

实现:

Vue 中使用 Lodash 的 differenceBy 函数可以方便地比较两个数组并找出它们的差异。

安装和引入Lodash

首先,你需要在项目中安装Lodash库。可以通过npm进行安装:

复制代码
npm i --save lodash

然后,在需要使用differenceBy函数的组件中引入Lodash:

复制代码
import _ from 'lodash';
使用differenceBy函数

differenceBy函数用于找出第一个数组中存在而第二个数组中不存在的元素。其基本语法如下:

复制代码
_.differenceBy(array, [arrays], [iteratee])
  • array:要检查其元素的数组。
  • [arrays]:(可选)一个或多个数组。
  • [iteratee]:(可选)每次调用返回一个用于比较的值。

示例代码

假设有两个数组beforeCitiesafterCities,你想找出beforeCities中有而afterCities中没有的元素:

复制代码
import _ from 'lodash';

const beforeCities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }],

const afterCities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],


const result = _.differenceBy(beforeCities, afterCities, 'value');
console.log(result); // 输出: [{value: 'Shanghai',label: '上海'}]

进阶:

进一步封装函数,分别得到删除和添加的数据

复制代码
  <div class="box-left">
    <h1>城市(选择前)</h1>
    <d-table :data="beforeData"></d-table>
  </div>

  <div class="box-warp">
    <div class="box-top">
      <h1>被删除的城市</h1>
      <d-table :data="initData .del"></d-table>
    </div>
    <div class="box-bottom">
      <h1>新增加的城市</h1>
      <d-table :data="initData .add"></d-table>
    </div>
  </div>

  <div class="box-right">
    <h1>城市(选择后)</h1>
    <d-table :data="afterData"></d-table>
  </div>


  initData : {add:[], del:[]}

  import { Dtable} from '@/components/Dtable'

  created() {
    this.initData = this.handList(this.beforeData, this.afterData)
  },

  methods: {
    handList(arr1, arr2) {
      var del= _.differenceBy(this.setJson(arr1), this.setJson(arr2), 'json')
      var add = _.differenceBy(this.setJson(arr2), this.setJson(arr1), 'json')
      return {
        add,
        del,
      }
    },
    setJson(arr) {
      arr.forEach(i => {
        i.json = JSON.stringify(i)
      });
      return arr;
    }
  }
相关推荐
慧一居士20 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead22 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js