vue3 toggleRowSelection用法 实现表格回显、单选

    <Table ref="tableRef" :reserve-selection="true" row-key="id" v-loading="loading"
      @selection-change="selectChange" :showIndex="false" :data="tableData" :maxHeight="'900'"
      @getTableData="getTableData">
      <el-table-column type="selection" width="40px" fixed></el-table-column>
      <el-table-column prop="ruleName" label="规则模板名称" align="left"/>
    </Table>

//回显
const tableRef = ref(null)
const getTableData = () => {
  loading.value = true;
  querySetRuleInfo(props.channelRulesVisible.data.platformCommodityId) .then((res: any) => {
      let data = res.result;
      tableData.value = data;
        nextTick(() => {
          if(tableData.value.length&&props.channelRulesVisible.data)
            for (var i = 0; i < tableData.value.length; i++) {
              if (props.channelRulesVisible.data.ruleId == tableData.value[i].ruleInfoId) {
                tableRef.value.table.toggleRowSelection(tableData.value[i], true)
              }
            }
        });
    })
    .catch((error) => {
 	
    })
    .finally(() => {
     loading.value = false;
    });
};

//单选：
    const selectChange = (selection: any) => {
      if (Object.keys(selection).length == 1) {
        tableData.value = selection[0];
      } else {
        let del_row = selection.shift();
        // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        tableRef.value.table.toggleRowSelection(del_row, false);
        tableData.value = selection[0];
      }
    };