当前位置：首页 > news >正文

el-table表格toggleRowSelection方法选中无效

news 来源：原创 2025/5/1 6:07:01

开发中会有对表格中进行默认选中的功能，element-plus官方有一个选中示例，如下

const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行

let row={
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
multipleTableRef.value!.toggleRowSelection(row, undefined)

通过查询得知toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item

如果需要通过接口加载完表格数据，再回显勾选，那还需要写在nextTick函数里边

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
const table = reactive({
  tableData: [],
  selected:[]//已选数据id
});
const tableRef = ref();
//获取表格数据
const getTable=()=> {
  getTableData(params).then((res) => {
  	table.tableData = res.data?? [];
    // 选中
    nextTick(() => {
      table.tableData.forEach(item => {
        let result = table.selected.find(row => row == item.id);
        if (result) {
          tableRef.value.toggleRowSelection(item, true);
        }
      });
    });
  })
}
</script>