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
}
相关推荐
打小就很皮...6 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
JAVA学习通12 分钟前
OJ竞赛平台----C端题目列表
java·开发语言·jvm·vue.js·elasticsearch
IT_陈寒15 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit27 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢28 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯42 分钟前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试
麦麦大数据1 小时前
F025 基于知识图谱图书可视推荐系统 vue+flask+neo4j | python编写、知识图谱可视化+推荐系统
vue.js·python·知识图谱·推荐算法·协同过滤·图书推荐
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
用户352120195601 小时前
React-router v7
前端
Mintopia1 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈