element树状表格选择父节点子节点全选，子节点不全选父节点半选

原创

已于 2022-04-26 14:52:51 修改 · 5.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #el-table

于 2022-04-26 14:51:10 首次发布

本文介绍如何在qz-pro-table组件中实现树状表格的全选功能，当父节点被选中时子节点自动响应。通过row-class-name和header-row-class-name控制复选框状态，并详细展示了相关方法如checkIsAllSelect、selectAllFun和setRowIsSelect的实现过程。

场景

element 树状表格，表格全选时所有项（包括所有子节点）都选中，选中树状表格父节点时，这个父节点下所有子节点也都要选中，如果某个父节点下的所有子节点没有全部，则这个父节点处于半选状态

效果图

在这里插入图片描述

实现

通过row-class-name和header-row-class-name控制复选框不确定状态显示，通过select-all和select事件判断是否选中，isSelect字段代表是否选中，true是选中，false是不选中，空为不确定
qz-pro-table组件是根据el-table进行二次封装，使用与el-table一样

<template>
	<qz-pro-table
	   ref="table"
	   border
	   row-key="id"
	   :data-source="getDataList"
	   @select-all="selectAllFun"
	   :row-class-name="rowClassNameFun"
	   :header-row-class-name="headerRowClassName"
	   @select="selectFun"
	   :tree-props="{
   
   
	     children: 'databaseSourceList',
	     hasChildren: 'hasChildren',
	   }"
	 >
	   <qz-table-column type="selection" width="45"></qz-table-column>
	   <qz-table-column
	     prop="name"
	     label="任务名称"
	     min-width="100"
	     show-overflow-tooltip
	   ></qz-table-column>
	   <qz-table-column
	     prop="successTime"
	     label="最近成功时间"
	     min-width="150"
	     show-overflow-tooltip
	   >
	     <template slot-scope="{ row }">{
   
   {
   
   
	       row.successTime || "--" | timeFormat("YYYY-MM-DD HH:mm:ss")
	     }}</template>
	   </qz-table-column>
	 </qz-pro-table>
</template>
<script>
export default {
   
   
	data() {
   
   
	   return {
   
   
	      listParams: {
   
   
	        page: 1,
	        size:

最低0.47元/天解锁文章