elementUI table表格进行全选和全不选和选中列表中的数据中的详情中的某一个参数时,需要回显对应, 不想使用foreach循环, 那么应该怎么做呢?

需求: 所选择的贴纸需要如果对应表格的的详情中的图片id相同, 进行回显

  data() {
    return {
      list: [],
      selectDialog: false,  // 选择贴纸弹框
      detailDialog: false,  // 详情
      tableList:  [
        {"id":28,"tags_name":"贴纸7","img_id":"[363]","img":[]},
        {"id":27,"tags_name":"11","img_id":"[220]","img":[{"id":220}]},
        {"id":26,"tags_name":"10","img_id":"[219]","img":[{"id":219,}]},
        {"id":25,"tags_name":"9","img_id":"[218]","img":[{"id":218,"}]},
        {"id":24,"tags_name":"8","img_id":"[217]","img":[{"id":217,"}]},
        {"id":23,"tags_name":"贴纸七","img_id":"[214,215,216]","img":[{"id":214,},
        {"id":215,},{"id":216,}]},
        {"id":22,"tags_name":"贴纸六","img_id":"[213]","img":[{"id":213,}]},
        {"id":21,"tags_name":"贴纸5","img_id":"[211,212]",
        {"id":212,}]},
        {"id":20,"tags_name":"贴纸四","img_id":"[209,210]","img":[{"id":209,},
        {"id":210,}]},
        {"id":19,"tags_name":"贴纸系列三","img_id":"[208]","img":[{"id":208,"}]}
      ],        // 请求接口返回的表格
      tableListcopy: [],     //存储请求接口返回的表格
      count: 1,
      walllist: [], // 存储选择的图片
      selectImg: [], // 在表格上选中的图片
    }
  },

在获取到tableList时进行第一次的回显

    // 打开列表的弹框
    selectTags() {
      this.changeSeries()
      this.selectImg = this.walllist.map((item) => item.id) // 直接获取对应的id会与tableListx下每一行的img进行匹配
    },

changeSeries(){
// 將数据扁平化处理, 因为只需要查看tableList下的img的中id是否存在this.walllist数组中, 因为列表row的id会和row.img中的id会存在相同的情况, 所以可以将row的id进行特殊处理在后面拼接上了'---111111',这样就不会有重复的id的情况
 this.tableList = this.tableList.map(item => { return { ...item, id: item.id + '---111111' } })
  
          this.count = res.data.data.count
          this.selectDialog = true
          this.$nextTick(() => {
            if (this.walllist.length > 0) {
              this.walllist.forEach((i) => {
                this.tableList.forEach((item) => {
                  item.img.forEach((e) => {
                    if (i.id == e.id) {
                      this.$refs.multipleTable.toggleRowSelection(item, true);
                    }
                  })
                })
              })
            }
          })
}

这个地方我们不能用select-change事件, 因为使用了这个事件将会在我回显的时候, 详情中有3张图片, 但是我只选中两个,在我为进行这个列表弹框的时候触发select-change事件, 将3张图片一起选中, 这不是我们想要的, 所以只能使用select和select-all进行触发

一个一个选择
 // 选择系列
    handleSelectionChange(val, row) {
      if (val.find(item => item.id == row.id)) {
        this.selectImg = [...new Set([row.id, ...row.img.map(item => item.id), ...this.selectImg])]
      } else {
        const deleteIds = [row.id, ...row.img.map(item => item.id)]
        this.selectImg = this.selectImg.filter(item => !deleteIds.includes(item))
        console.log(this.selectImg)
      }
    },

    // selectAll
    selectAll(selection) {
      //全不选
      if (selection.length == 0) {
        let arr = []
        arr = this.tableList.map(item => {
          return [item.id, item.img.map(ii => ii.id)]
        }).flat(2)
        this.selectImg = this.selectImg.filter(item => !arr.includes(item))
      } else {
//全选
        let arr = []
        arr = selection.map(item => {
          return [item.id, item.img.map(ii => ii.id)]
        }).flat(2)
        arr.map((item, index) => {
          if (this.selectImg.indexOf(item) == -1) {
            this.selectImg.push(item)
          }
        })
      }
    },

在点击确定按钮后将选中的图片赋值给walllist拿到最新的图片以及id, 下一次再次进入就会选中对应的

comfirmselectDialog() {
        let ary = []
        ary = ary.filter(i => this.selectImg.includes(i.id))
      this.$emit('getwalllist', this.walllist)
      this.selectDialog = false // 关闭弹框
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值