1. 表格嵌套表格时,隐藏父表格的全选框
场景:当table表格设置复选(多选)功能时,如何隐藏表头的复选框,不让用户一键多选。
<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. 判断多选时的点击操作,是选中还是取消
<el-table @select="onSelect">// 判断时选中还是取消
function onSelect(rows, row) {let selected = rows.length && rows.indexOf(row) !== -1console.log('selected', selected) // true就是选中,0或者false是取消选中
}
3. 表格有展开项时,动态控制表格的展开图标显示或隐藏
首先,可以通过为el-table-column设置type="expand"属性来为表格增加展开项。
<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属性,动态为表格传入类名
<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
}