如何利用el-table的selection多选框实现单选的效果

如何利用el-table的selection多选框实现单选的效果

HTML

  <app-table ref="tableSF" height="500px" header-row-class-name="only" :data="addSuiFangData" @select="handleSelectionChange">
            <app-table-column type="selection" width="55"></el-table-column>
            <app-table-column label="随访包名称" prop="planName"></app-table-column>
</app-table>

data：数据绑定

selection-change：选择改变，拿到的参数是选择的那项，不要用这个，他这个数据好像底层做了处理，无法立即拿到

select：选中触发

JS

const selectionSF = ref() // 存储选中，后续调接口用
const tableSF = ref()  // 拿到实例
const handleSelectionChange = (arr: any, row: any) => {
    // arr是你选中的组成的数组，row是你选中的当前项
    selectionSF.value = row;  // 存储，后续调接口要
    if (arr.length > 1) {  // 如果选中的长度大于1
        tableSF.value.clearSelection();  // 清空全部选中
        tableSF.value.toggleRowSelection(row);  // 选中当前
    }
};

CSS

<style scoped>
::v-deep .only .el-table-column--selection {
    visibility: hidden !important;  // 隐藏但占用原有位置
}
</style>

注意：如果一个页面有两个表格，一个不需要全选框，一个需要全选框。这样css的样式会混淆！
第一种方法就是封装成两个组件，通过scoped把两套代码的样式隔离。
第二种方法就是利用table组件提供的header-row-class-name这个api