背景

要用elementplus里的el-table实现单选，但是el-table的单选是没有方框可以勾选的，只是鼠标点击表格内某一行，那一行背景变色；他的多选是有方框可以勾选的，表头是一个全选框，所以，现在的目标就是改造多选框为单选框，同时去掉表头的全选框。

解决方式

1.多选变单选

以下代码参考：代码来源

<template>                                                                                                 
    <!-- 注意要包一层div根元素，否则css样式可能会不生效，原因不详 -->
    <div>
        <el-table ref="taskTableRef" :data="tableData" style="width: 100%" @select="selectClick">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="元气少女缘结神" />
        </el-table>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, toRefs } from 'vue'
const taskTableRef = ref(); // 表格ref

// 变量定义
const state = reactive({
    tableData: [{
        name: '巴卫'
    },
    {
        name: '奈奈生'
    },
    {
        name: '电灯泡'
    }],
});

// 主要方法
// table选择项发生变化时会触发该事件
const selectClick = (selection: any, row: any) => {
    if (selection.length > 1) {
        let del_row = selection.shift();
        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
    }
}

const { tableData } = {
    ...toRefs(state),
};

</script>

<style scoped lang='scss'>
// 隐藏全选按钮
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>

这里多选变单选主要是使用了selectClick 函数，其中的selection和row参数都是文档中规定的，但我没查到这两个参数的使用方法和其他信息（有知道的同学可以和我分享下），所以对这个函数里的语句的含义我也不大懂（还望好心大神解释一二），只知道使用了该函数后，多选就变成了单选。

但是目前全选框还未去掉，接下来就去掉全选框。

2.去掉全选框

上面的代码里有这一段

<style scoped lang='scss'>          
// 隐藏全选按钮
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>

是用来去掉全选框的，但是放在我的代码上没有起作用，于是我去查文档，发现el-table有一个属性header-row-class-name，该属性可以为表头的某一列指定class name，然后给该class name指定样式即可。

于是我就按部就班操作如下：

<template>                                                                                                                   
    <!-- 注意要包一层div根元素，否则css样式可能会不生效，原因不详 -->
    <div>
        <el-table ref="taskTableRef" class="table_wrapper" :data="tableData" style="width: 100%" @select="selectClick" :header-cell-class-name="cellClass">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="元气少女缘结神" />
        </el-table>
    </div>
</template>
<script setup lang='ts'>
function cellClass(row: any) {
  // 隐藏多选框一列的表头即全选框
  if (row.columnIndex === 0) {
    return 'disabledCheck';
  }
}
</script>
<style scoped lang='postcss'>
// 隐藏全选按钮
.table_wrapper {
	// 这里即使指定了class name，也需要样式穿透，否则不生效
    /deep/ .disabledCheck .cell {
      visibility: hidden;
    }
  }
</style>

感想

我这css基础啥的都太薄弱了，对于代码很多都是把能用的拼接起来就行，但是不知道咋回事，而且也不想去研究css，就指着用到的时候再说，主打一个懒加载。

希望好心大佬能给一些学习css的建议吧，感激不尽！

参考

参考