el-table表格的多选框默认选中可分页选中

el-table表格的多选框默认选中可分页选中

项目场景：

选择财务负责人：
进入负责人选择列表时默认勾选

---

解决过程：

弹出负责人页面时如何默认选中： 弹出窗口是根据userid选中对应的负责人，可以在后台返回数据之后调用el-table的toggleRowSelection方法来实现默认勾选

// 判断传过来的id和列表的id相等就选中
    selectTableByUserId() {
      this.$nextTick(() => {
      // userid数组
        const userIdSelectList = this.userIdSelectList
        // 数据列表数组
        const tableData = this.emplist
        for (var i = 0; i < userIdSelectList.length; i++) {
          for (var j = 0; j < tableData.length; j++) {
            if (userIdSelectList[i] === tableData[j].userId) {
            // 执行选中方法
              this.$refs.employeTables.toggleRowSelection(tableData[j], true)
            }
          }
        }
      })
    }
    

但是此方法如果只执行一次只可选择第一页中数据，所以需要在执行列表方法时重新执行。

  handleFilter_tmp() {
      this.listLoading = true
      Util.appPost('/api/user/index', this.listQuery).then((res) => {
        this.listLoading = false
        this.total = res.total
        this.emplist = res.rows
        this.selectTableByUserId()
      })
    },

此方法还有一个问题,，当你将默认选中的数据取消勾选时切换页码再切换回来时会重新选中，所以可在将其默认选中后删除userid数组中id。

 // 判断传过来的id和列表的id相等就选中
    selectTableByUserId() {
      this.$nextTick(() => {
        const userIdSelectList = this.userIdSelectList
        const tableData = this.emplist
        for (var i = 0; i < userIdSelectList.length; i++) {
          for (var j = 0; j < tableData.length; j++) {
            if (userIdSelectList[i] === tableData[j].userId) {
              this.$refs.employeTables.toggleRowSelection(tableData[j], true)
              // 删除已选中数据id
              userIdSelectList.splice(i, 1)
            }
          }
        }
      })
    },

如有其它问题请各位大佬指正