Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)及当表格数据 只有一条时，默认为选中状态

实现效果

完整代码

<div class="box-pos">
      <el-table ref="table" 
           :header-cell-style="{ color: '#FFF', background: '#333' }"
           :cell-style="{ color: '#FFF', background: '#333' }" 
           :data="grListData" style="width: 100%"
           @selection-change="selectionChange">
          <template slot="empty">
             <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
          </template>
          <el-table-column type="selection" width="50" />
          <el-table-column prop="plantCode" label="厂区" />
          <el-table-column prop="grCode" label="单据号" />
          <el-table-column prop="grItem" label="单据行" />
          <el-table-column prop="grDate" label="单据日期" />
          <el-table-column prop="materialCode" label="料号" />
          //........
     </el-table>
</div>

js代码

  data() {
        return {
            multipleSelection: [],
        };
    },
  methods: {
        selectionChange(data) {
            this.multipleSelection = []
            if (data.length > 1) {
                this.$refs.table.clearSelection()
                this.$refs.table.toggleRowSelection(data[data.length - 1])
            }
            this.multipleSelection = data[data.length - 1] ? [data[data.length - 1]] : []
        },
 }

隐藏表头上的全选Checkbox

.box-pos {
    /**找到表头那一行，然后把里面的复选框隐藏掉**/
    ::v-deep .el-table__header-wrapper .el-checkbox {
        display: none !important;
    }

}

参考链接：https://blog.csdn.net/a772116804/article/details/131899825

需求

当表格数据 只有一条时，默认为选中状态

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      isSingleData: false
    };
  },
  watch: {
    tableData(newData) {
      if (newData.length === 1 && !this.isSingleData) {
        this.isSingleData = true;
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleRowSelection(newData[0], true);
        });
      }
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.isSingleData = selection.length === 1;
    },
  }
};
</script>