Vue3 + TypeScript + Element Plus 表格行多选与行展开的组合应用实例

场景应用效果：

需求特点：

1、表格行未选中状态，点击表格行（或点击行内的复选框），选中行，展开行 ；

2、表格行已选中状态，点击表格行（或点击行内的复选框），取消选中行，取消展开行 ；

3、展开行后，表格滚动条设置到当前选中行的位置；

代码特点：

表格设置展开行的关键信息 row-key 和 expand-row-keys

row-key="id"

:expand-row-keys="expandedRows"

:default-expand-all="false"

展开行 type="expand"，width="1" 故意屏蔽列，只能设置最小为1，设置0是自适应列宽，再配合样式设置，隐藏默认的展开图标

:deep(.el-table__expand-icon) {

  display: none;

}

选择行 type="selection"

点击表格行事件 @row-click="onTableRowClick"

表格选集变化事件 @selection-change="handleTableSelectionChange"

监听表格选集变化 watch

表格滚动条设置到当前选中行的位置 await nextTick();  tableRef.value?.setScrollTop(topVal);

实例代码：

ReagentInDialog.vue