el-table相关的功能实现

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是取消选中
}
  1. 表格有展开项时,动态控制表格的展开图标显示或隐藏

首先,可以通过为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
}
相关推荐
石小石Orz9 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini11 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆12 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038113 分钟前
大文件分片上传和断点续传
前端
极客悟道13 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅14 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖17 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin9317 分钟前
埋点方案实现
前端
斯~内克21 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang33 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范