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
}
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构