数组对象根据条件删除某一字段数据、自定义组装数组对象数据、引入侧边模态框滚动内部内容不应滚动底层页面、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用、div横向滚动条位置放上面

1、数组对象根据条件删除某一字段数据js逻辑：

for (let i = this.singDataList.length - 1; i >= 0; i -= 1) {
              if (this.singDataList[i].num === undefined) {
                this.singDataList.splice(i, 1)
              }
            }

2、自定义组装数组对象数据

              this.ids = []
              const idd = resp.payload.lastList
              idd.forEach((item) => {
                this.ids.push({ id: item.code, name: item.name })
              })
              this.patStandList.push({
                nameId: 3,
                name: '指标趋势',
                standardItemList: this.arrayUnique2(this.ids, 'id')
              })


arrayUnique2(arr, name) {
      const hash = {}
      return arr.reduce((item, next) => {
        hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
        return item
      }, [])
    },

3、引入侧边模态框滚动内部内容不应滚动底层页面

vue项目main.js文件注册全局方法

//main.js
Vue.prototype.noScroll = function () {
  const mo = (e) => {
    e.preventDefault()
  }
  document.getElementsByTagName('html')[0].style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)
}
Vue.prototype.canScroll = function () {
  const mo = (e) => {
    e.preventDefault()
  }
  document.getElementsByTagName('html')[0].style.overflow = ''
  document.removeEventListener('touchmove', mo, false)
}

//detail.vue组件页面相应watch监听调用
detectionFlag代表控制模态框显隐的字段

watch: {
    'detectionFlag'(e) {
      if (e) {
        this.noScroll()
      } else {
        this.canScroll()
      }
    }
  },

4、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用

<template v-slot:[`item.delFlag`]="{ item, index }">
            <div style="display: flex; align-items: center">
              <v-btn
                text
                style="padding: 0; padding-right: 32px"
                color="#0B41CD"
                v-if="item.delFlag"
                @click="rzGroupEdit(item, index)"
                :disabled="!getLimit('SYSTEM_MANAGE_DICT_EDIT')"
              >
                编辑
              </v-btn>
              <v-btn
                text
                style="padding: 0; padding-right: 32px"
                color="#0B41CD"
                v-if="!item.delFlag"
                @click="rzGroupSave(item, index)"
              >
                保存
              </v-btn>
            </div>
          </template>

rzGroupEdit(item, index) {
      const editChange = this.tableDataList[index]
      editChange.delFlag = false
      this.$set(this.tableDataList, index, editChange)
    },
async rzGroupSave(item, index) {
      this.newValidNum = item.extendParams.validNum
      this.newValidNumType = item.extendParams.validNumType
      this.newVal = item.val
      if (!/^[1-9]\d*$/.test(this.newValidNum)) {
        this.$message.error('输入框内只能输入数字，不能为小数、不能小等于0')
        return
      }
      const saveChange = this.tableDataList[index]
      saveChange.delFlag = true
      this.$set(this.tableDataList, index, saveChange)
      await this.itemSaveSubmit()
    },

5、自定义div横向滚动条位置放上面

.infoRitTable {  //父级div
      width: 100%;
      overflow: auto;
      display: flex;
      transform: scaleY(-1);  //关键代码
}
.selfTableAll {  //子级div
        min-width: 160px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: #fff;
        transform: scaleY(-1); //关键代码
}