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

最新推荐文章于 2024-08-14 11:29:56 发布

Feast_aw

最新推荐文章于 2024-08-14 11:29:56 发布

阅读量2.5k

点赞数 4

文章标签： vue.js js elementui

本文链接：https://blog.csdn.net/Feast_aw/article/details/131900711

版权

<el-table
      ref="tableRef"
      :data="tableConfig.tableData"
      @selection-change="handleSelectionChange"
      border
      :header-cell-style="{ background: '#eef1f6' }"
      v-loading="tableConfig.loading"
      :max-height="500"
      style="width: 100%"
      :row-key="(row: any) => row.columnId"
    >
      <el-table-column
        type="selection"
        label="全选"
        align="center"
        width="55"
        :selectable="selectable"
        :reserve-selection="true"
      />
      <template v-for="(col, index) in tableConfig.columns">
        <el-table-column
          v-if="col.type === 'normal'"
          align="center"
          :key="index"
          :min-width="col.width"
          :prop="col.prop"
          :label="col.label"
        />
      </template>
    </el-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 || '获取失败')
  }