做电子书网站 赚钱wordpress博客主题模板

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
}