前端 vue3 + element-plus + ts 隐藏表头的全选框

发布于:2024-11-28 ⋅ 阅读:(11) ⋅ 点赞:(0)

表格属性设置,其中必须设置 :header-cell-class-name="handleHeaderCellClassName"

<template>代码片段

        <el-table
          ref="applyTable"
          :data="applyTableData"
          v-loading="applyTableLoading"
          highlight-current-row
          :border="true"
          style="width: 100%; height: 475px"
          :row-style="{ height: '0px', margin: '0px', padding: '0px' }"
          @row-click="onApplyTableRowClick"
          @selection-change="handleApplyTableSelectionChange"
          :header-cell-class-name="handleHeaderCellClassName">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="outerApplyId" label="受理编号" width="120" header-align="center" sortable show-overflow-tooltip />
          <el-table-column prop="acceptDate" label="受理日期" width="120" header-align="center" sortable show-overflow-tooltip />
          <el-table-column prop="acceptTypeName" label="受理类别" width="150" header-align="center" sortable show-overflow-tooltip />
          <el-table-column prop="acceptSmallTypeName" label="受理小类" width="220" header-align="center" sortable show-overflow-tooltip />
          <el-table-column prop="sjdwName" label="受检单位" header-align="center" sortable show-overflow-tooltip />
        </el-table>

样式设置

<style scoped lang="scss"> 代码片段

  // 隐藏表头的全选框,el-table中需要设置 :header-cell-class-name="handleHeaderCellClassName"
  ::v-deep .hideCheckBox .cell {
    visibility: hidden;
  }

应用效果