vue3 el-table手动选中某一行、设置默认选中某一行

钱端工程师2024-06-29 1:06

选中某一行用的是el-table的toggleRowSelection方法，用来切换某一行的选中状态

javascript 复制代码

<template>
  <el-table :data="tableData" ref="myTable" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
  </el-table>
  <el-button @click="toggleSelection">切换第二行选中状态</el-button>
</template>

<script setup>
import { ref, reactive, nextTick, onActivated, watch } from "vue";
let myTable;
nextTick(()=>{
  myTable = ref();
})

const data = reactive({
  tableData: [{//表格的数据
    name: 'Tom1',
  }, {
    name: 'Tom2',
  }, {
    name: 'Tom3',
  }],
  selectData:[]//已选的表格数据
})

// 表格选中有变动，重新赋值
const handleSelectionChange = (val) => {
  data.selectData = val;
}

// 自己选择哪些数据选中
const toggleSelection = () => {
  myTable.value.toggleRowSelection(data.tableData[1], true);
}
</script>

toggleRowSelection方法有两个参数，

第一个参数是el-table的data绑定的第几个数据，

第二个参数是要把这条数据设置成选中还是不选中，不传第二个参数就会切换这条的选中状态

设置表格默认选中某些行就在页面加载的时候用此方法切换一下选中的状态为true就行了