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
}
相关推荐
helloworddm几秒前
Orleans Grain Directory 系统综合分析文档
c#·1024程序员节
chxii几秒前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
摸鱼的老谭7 分钟前
Java学习之旅第三季-17:Lambda表达式
java·lambda表达式·1024程序员节
冰山上的柯莱9 分钟前
需求上线部署流程
1024程序员节·上线流程
文火冰糖的硅基工坊9 分钟前
[人工智能-大模型-66]:模型层技术 - 两种编程范式:数学函数式编程与逻辑推理式编程,构建起截然不同的智能系统。
人工智能·神经网络·算法·1024程序员节
小安运维日记12 分钟前
RHCA - DO374 | Day03:通过自动化控制器运行剧本
linux·运维·数据库·自动化·ansible·1024程序员节
know__ledge20 分钟前
Pytest+requests进行接口自动化测试9.0(redis + excal文件的使用)
1024程序员节
蜗牛沐雨26 分钟前
详解c++中的文件流
c++·1024程序员节
AntBlack26 分钟前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好33 分钟前
react中props的使用
前端·react.js·前端框架