开发vue遇到的一些坑记录

1.vm.$set()

初始化使用this.$set()方法监听对象后，在使用 this.$set() 改变后 视图没有变化。 原因：因为key值已经存在，当你再次改变时只会更改data并不会为该Key添加响应监测。 解决：this.$delete()掉这个key在进行this.$set()

2.处理el-table 分页处理数据总数问题

增加 ref row-key 及 @select方法

    
    <el-table
        ref="multipleTable"
        row-key="customerGroupId"
        @select="handleSelectionChange"
      >
      </el-table>

在el-table-column增加属性 reserve-selection=true

        <el-table-column
          reserve-selection
        >

通过toggleRowSelection方法反显勾选

    this.$nextTick(() => {
        res.data.list.forEach(o =>
          this.$refs.multipleTable.toggleRowSelection(o,true)
        );
      });

在handleSelectionChange方法 处理选中和删除方法

    handleSelectionChange(selection, row) {
      // 处理选中取消条数
      const selected = selection.length && selection.indexOf(row) !== -1;
      if (!selected) {
        const res = this.multipleSelection.findIndex(
          item => item.customerGroupId == row.customerGroupId
        );
        this.multipleSelection.splice(res, 1);
      } else {
        this.multipleSelection.push(row);
      }

      if (this.isTotalVisible) {
        this.groupCount = this.multipleSelection.length;
        this.customerCount = this.multipleSelection.reduce(
          (total, item) => total + item.count,
          0
        );
        let emitObj = {
          groupCount: this.groupCount,
          customerCount: this.customerCount,
          customerGroup: this.multipleSelection
        };
        this.$emit("on-change", emitObj);
      } else {
        this.$emit("on-change", this.multipleSelection);
      }
    },

在NDawer内使用滚动无限加载，滚动加载不设置固定高度，随父级的高度撑开

<NDrawer
      v-model:show="isShowNewsList"
      to="#drawer-target"
      placement="bottom"
      height="80%"
      class="w-full h-full"
    >
      <NDrawerContent :native-scrollbar="false" class="relative">
          <div class="absolute top-4 bottom-4 left-4 right-4">
            <NInfiniteScroll :distance="10" class="h-full" @load="handleLoad">
              内容
            </NInfiniteScroll>
          </div>
        </template>
      </NDrawerContent>
    </NDrawer>