网站建设的特色,网站开发验收规范,电商网页设计理念,拓什么设计网站1. 表格嵌套表格时#xff0c;隐藏父表格的全选框 场景#xff1a;当table表格设置复选#xff08;多选#xff09;功能时#xff0c;如何隐藏表头的复选框#xff0c;不让用户一键多选。 el-table :header-cell-class-namecellClass// 表头复选框禁…1. 表格嵌套表格时隐藏父表格的全选框 场景当table表格设置复选多选功能时如何隐藏表头的复选框不让用户一键多选。 el-table :header-cell-class-namecellClass// 表头复选框禁止点击
function cellClass(row) {if (row.columnIndex 0) {return disabledCheck}
}// 隐藏表头的复选框样式
:deep(.el-table .disabledCheck .cell .el-checkbox__inner) {display: none;
} 2. 判断多选时的点击操作是选中还是取消
el-table selectonSelect// 判断时选中还是取消
function onSelect(rows, row) {let selected rows.length rows.indexOf(row) ! -1console.log(selected, selected) // true就是选中0或者false是取消选中
}
3. 表格有展开项时动态控制表格的展开图标显示或隐藏 首先可以通过为el-table-column设置typeexpand属性来为表格增加展开项。
el-table :dataprops.tableDatael-table-column typeexpand!-- 展开的子任务 --template #defaultpropsel-table :dataprops.row.childJobLists /el-table/template/el-table-column/el-table 若希望动态控制第一列是否显示展开图标可以通过动态设置table的样式来实现。 此处用到row-class-name属性动态为表格传入类名
el-table :row-class-namegetRowClassNamefunction getRowClassName({ row, rowIndex }) {// 根据row的childJobLists属性是否为空数组判断该行内容是否展开if (row.childJobLists.length 0) {return row-expand-cover}
}:deep(.row-expand-cover .el-table__expand-icon) {visibility: hidden
}
