Vue3 element plus 中table组件多选,默认根据接口返回条件选中


      
      
    

// row-key一定要有,要不:reserve-selection="true"设置完这个之后,当前页选中之后,翻页之后会显示有问题,选中的不对
这部分代码只需要看nextTick部分,toggleRowSelection这个是选中的方法,tableRef.value是table的dom
const init = async () => {
  console.log('init')
  try {
    const data = {
      schemeID: editRoleStore.schemeID,
      pageNo: editRoleStore.tableConfig.page,
      pageSize: editRoleStore.tableConfig.size
    }
    editRoleStore.tableConfig.loading = true
    const res:any = editRoleStore.type === 1 ? await empower.containStatusApi(data) : await empower.noContainStatusApi(data)
    if (res.code === 0) {
      editRoleStore.tableConfig.loading = false

      if (res.data.list && res.data.list.length > 0) {
        editRoleStore.tableConfig.tableData = res.data.list.map(
          (item: any) => {
            return {
              ...item,
              roleType: ROLETYPE[item.roleType],
              roleLevel: ROLELEVEL[item.roleLevel],
              columnId: item.serviceID + item.roleID
            }
          }
        )
        nextTick(() => {
          editRoleStore.tableConfig.tableData.forEach((row) => {
            if (row.isSelected === 1) {
              tableRef.value.toggleRowSelection(row, true)
            }
          })
        })
      }
      editRoleStore.tableConfig.totalItems = res.data.pag.total
    } else {
      editRoleStore.tableConfig.loading = false
      ElMessage.error(res.msg)
    }
  } catch (error: any) {
    editRoleStore.tableConfig.loading = false
    // ElMessage.error(error.msg || '获取失败')
  }

你可能感兴趣的:(vue.js,js,elementui)