vue中 type=“selection“ 勾选框的回显问题

当勾选完数据点击保存按钮传到其他页面之后，再次打开该页面勾选状态的回显问题，也涉及到父组件和子组件参数互相传递功能

 子组件中把勾选好的数据传到父组件，用 'save' 接收：

onSave() {
      const _this = this
      if (this.multiple) {
        //把勾选好的数据传给父组件
        this.$emit('save', [..._this.multipleSelection])
      }
    },

 父组件通过@save接收，执行onReviewersSave()方法

<member-search
  ref="member-search"
  :multiple="true"
  :visible="reviewersVisible"
  :transferData="transferData"   //回显已勾选的数据传回子组件
  @close="onReviewersClose"
  @save="onReviewersSave"        //save接收已勾选的数据
/>

<script>
export default {
  data() {
      //定义多选框回显数据
      transferData: [],
  },
  methods: {
      onReviewersSave(v) {
      //把勾选传回来的数据给 transferData[] 赋值用于回显功能
      this.transferData = v      

      //执行其他的显示操作
      const reviewersData = v.map((item) => {
        return {
          reviewerName: item.nickName,
          reviewerId: item.openId
        }
      })
      this.reviewers = reviewersData
      this.reviewersVisible = false
    }
  }
}
</script>

子组件接收已经勾选的数据，与子组件中  tableData的id字段  进行比对，符合要求进行多选框回显功能

export default {
  props: {
    //接收父组件的 transferData  定义为 Array 类型
    transferData: {
      Type: Array
    }
  },
  methods: {
    /**
     *获取子组件列表数据
     */
    async getList(param) {
      this.listLoad = true
      try {
        const res = await getMemberListData({
          ...param,
          current: param?.current || 1,
          size: param?.size || 10
        })
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
          this.current = res.current
          this.size = res.size
          // 使表单与搜索条件统一，防止翻页的时候表单数据与搜索条件不对应而产生误导
          this.formData = { ...this.searchData }

          //调用回显方法
          this.getReviewersData()  
        } else {
          this.$message.error(res.message)
        }
        this.listLoad = false
        return res
      } catch (error) {
        return error
      } finally {
        this.formLoading = false
      }
    },

   //执行回显功能
    async getReviewersData() {
      //判断 transferData 是否为空
      if (this.transferData !== null ) {
        this.transferData.forEach((el) => {
          for (let i = 0; i < this.tableData.length; i++) {
            if (el.id === this.tableData[i].id) {
              this.$nextTick(() => {
                //判断回显数据与本页tableData数据相匹配，匹配成功勾选框状态变为true
                this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true)
              })
            }
          }
        })
      }
    },
 
 }
}