Element Plus el-table 默认勾选行的方法

方法一：使用 row-key和 reserve-selection

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    row-key="id"  <!-- 必须指定row-key -->
  >
    <el-table-column type="selection" width="55" :reserve-selection="true" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const multipleTableRef = ref()
const tableData = ref([
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
])

// 默认选中的行ID
const defaultSelectedIds = [1, 3]

onMounted(() => {
  // 遍历表格数据，找到需要默认选中的行
  tableData.value.forEach(row => {
    if (defaultSelectedIds.includes(row.id)) {
      // 使用toggleRowSelection方法选中行
      multipleTableRef.value.toggleRowSelection(row, true)
    }
  })
})

const handleSelectionChange = (val) => {
  console.log('当前选中:', val)
}
</script>

方法二：使用 select和 select-all事件

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @select="handleSelect"
    @select-all="handleSelectAll"
    row-key="id"
  >
    <el-table-column type="selection" width="55" />
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const multipleTableRef = ref()
const tableData = ref([...]) // 同上

onMounted(() => {
  // 默认选中ID为1和3的行
  const rowsToSelect = tableData.value.filter(row => [1, 3].includes(row.id))
  rowsToSelect.forEach(row => {
    multipleTableRef.value.toggleRowSelection(row, true)
  })
})

const handleSelect = (selection, row) => {
  console.log('选中变化:', selection)
}

const handleSelectAll = (selection) => {
  console.log('全选变化:', selection)
}
</script>

方法三：使用 v-model 绑定选中数据

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      v-model="selectedRows"
      :reserve-selection="true"
    />
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const tableData = ref([...]) // 同上
const selectedRows = ref([])

// 设置默认选中的行
onMounted(() => {
  selectedRows.value = tableData.value.filter(row => [1, 3].includes(row.id))
})

const handleSelectionChange = (val) => {
  console.log('选中变化:', val)
}
</script>

方法四：分页表格保留选中状态

<template>
  <el-table
    ref="multipleTableRef"
    :data="currentPageData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" :reserve-selection="true" />
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
  />
</template>

<script setup>
import { ref, computed } from 'vue'

const multipleTableRef = ref()
const tableData = ref([...]) // 所有数据
const currentPage = ref(1)
const pageSize = ref(10)
const selectedRows = ref([])

const total = computed(() => tableData.value.length)
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})

// 默认选中某些行
onMounted(() => {
  const defaultSelectedIds = [1, 3, 5]
  selectedRows.value = tableData.value.filter(row => defaultSelectedIds.includes(row.id))
})

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const handleSelectionChange = (val) => {
  selectedRows.value = val
}
</script>