el-table相关的功能实现

Am1nnn2024-10-27 10:34

1. 表格嵌套表格时，隐藏父表格的全选框

场景：当table表格设置复选（多选）功能时，如何隐藏表头的复选框，不让用户一键多选。

javascript 复制代码

<el-table :header-cell-class-name="cellClass">

// 表头复选框禁止点击
function cellClass(row) {
  if (row.columnIndex === 0) {
    return 'disabledCheck'
  }
}

// 隐藏表头的复选框样式
:deep(.el-table .disabledCheck .cell .el-checkbox__inner) {
  display: none;
}

2. 判断多选时的点击操作，是选中还是取消

javascript 复制代码

<el-table @select="onSelect">

// 判断时选中还是取消
function onSelect(rows, row) {
  let selected = rows.length && rows.indexOf(row) !== -1
  console.log('selected', selected) // true就是选中，0或者false是取消选中
}

表格有展开项时，动态控制表格的展开图标显示或隐藏

首先，可以通过为el-table-column设置type="expand"属性来为表格增加展开项。

javascript 复制代码

  <el-table :data="props.tableData">
    <el-table-column type="expand">
      <!-- 展开的子任务 -->
      <template #default="props">
        <el-table :data="props.row.childJobLists"> </el-table>
      </template>
    </el-table-column>
  </el-table>

若希望动态控制第一列是否显示展开>图标，可以通过动态设置table的样式来实现。

此处用到row-class-name属性，动态为表格传入类名

javascript 复制代码

<el-table :row-class-name="getRowClassName">

function getRowClassName({ row, rowIndex }) {
  // 根据row的childJobLists属性是否为空数组，判断该行内容是否展开
  if (row.childJobLists.length == 0) {
    return 'row-expand-cover'
  }
}

:deep(.row-expand-cover .el-table__expand-icon) {
  visibility: hidden
}