vue3 element-plus table 多选框在在初始化渲染数据时默认将isopen:ture行数据赋值选中状态

vue3 element-plus table 多选框在在初始化渲染数据时默认将isopen:ture行数据赋值选中状态

在 Vue3 + Element Plus 的表格中，如果想根据数据中的某个字段（如 isOpen）来决定是否默认选中某一行，你可以通过自定义一个计算属性或者方法来实现。这里是一个示例：

Html
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" :reserve-selection="true">
      <template slot-scope="{ row }">
        <el-checkbox v-model="isSelected(row)" @change="handleSelectionChange"></el-checkbox>
      </template>
    </el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElTable, ElTableColumn, ElCheckbox } from 'element-plus'

// 假设这是你的表格数据
const tableData = [
  { id: 1, name: '张三', isOpen: true },
  { id: 2, name: '李四', isOpen: false },
  // 更多数据...
]

// 存储已选择行的引用
const selectedRows = ref([])

// 计算行是否应被选中
const isSelected = (row) => {
  return computed(() => row.isOpen && selectedRows.value.includes(row))
}

// 处理选择项改变的事件
const handleSelectionChange = (row, checked) => {
  if (checked) {
    selectedRows.value.push(row)
  } else {
    selectedRows.value = selectedRows.value.filter(r => r.id !== row.id)
  }
}

// 在组件初始化时预设默认选中的行（可选）
onMounted(() => {
  tableData.forEach(row => {
    if (row.isOpen) {
      selectedRows.value.push(row)
    }
  })
})
</script>

在这个例子中，我们并没有直接使用 default-checked-keys，而是通过自定义渲染来控制复选框的状态。当 isOpen 字段为 true 时，默认选中该行。同时，我们监听了复选框的 change 事件，以便实时更新已选择的行。

注意：这个示例可能需要根据实际情况进行调整以适应你的具体需求。