vue 数组删除(对象)单条删除,多条删除

1、数组单行删除

<!--
 * @Descripttion:单行删除
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-06-01 17:30:04
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-06-01 17:30:04
-->
    // 数据源
    demoData: [
      {
        id: '1',
        name: '奥巴马',
      },
      {
        id: '2',
        name: '狗头',
      },
      {
        id: '3',
        name: '卢锡安',
      },
      {
        id: '4',
        name: '盖伦',
      },
      {
        id: '5',
        name: '赵信',
      },
    ],
    methods: {
      demo() {
        console.log('全部数据 5条')
        console.log(this.demoData)
        //? 单选
        //! 删除单行数据
        const del = '3'
        this.demoData = this.demoData.filter((o) => {
          return o.id !== del
        })
        console.log('删除单行所返回的数据 4条')
        console.log(this.demoData)
      },
},

 

结果43eb5414e1b94537317957f511a6bc08

2、数组多行删除(同一数据源)

<!--
     * @Descripttion:单行删除
     * @version: 0.0.1
     * @Author: PengShuai
     * @Date: 2022-06-09 14:17:04
     * @LastEditors: PengShuai
     * @LastEditTime: 2022-06-09 14:17:04
    -->
    demo() {
      console.log('原数据')
      console.log(this.demoData)
      //? 多选
      //! 删除多行数据
      const selectData = [
        {
          id: '1',
          name: '奥巴马',
        },
        {
          id: '4',
          name: '盖伦',
        },
      ]
      console.log('删除数据')
      console.log(selectData)
      let newData = this.demoData.filter(
        (a) => !selectData.some((b) => a.id === b.id)
      )
      console.log('删除后数据')
      console.log(newData)
    }

 

原文链接:https://doubaoyuanma.com/blog/vue-%e6%95%b0%e7%bb%84%e5%88%a0%e9%99%a4%e5%af%b9%e8%b1%a1%e5%8d%95%e6%9d%a1%e5%88%a0%e9%99%a4%ef%bc%8c%e5%a4%9a%e6%9d%a1%e5%88%a0%e9%99%a4,转载请注明出处。

0

评论0

显示验证码
没有账号? 注册  忘记密码?