提交 4159ac0f 编写于 作者: RedPig97's avatar RedPig97

update: 表格分组行优化

上级 8325476a
import { DataTypes, dateFormat, deepCopy, GridControlState, IActionParam, IParam, isExistAndNotEmpty, MDControl } from "@core";
import { createUUID } from "qx-util";
import schema, { ErrorList, FieldErrorList } from 'async-validator';
import { Ref } from "vue";
/**
* @description 表格部件
* @export
......@@ -100,6 +101,11 @@ export class GridControl extends MDControl {
}
};
}
// 展开行
const useExpandedRowKeys: Ref<Array<string>> = ref([]);
const onExpandedRowsChange = (expandedRows: string[]) => {
useExpandedRowKeys.value = expandedRows;
}
// 表格选择功能配置
const useRowSelectionOption = computed(() => {
if (selectFirstDefault) {
......@@ -109,8 +115,18 @@ export class GridControl extends MDControl {
type: isSingleSelect ? 'radio' : 'checkbox',
columnWidth: 50,
selectedRowKeys: this.state.selectedRowKeys,
checkStrictly: this.props.multiple ? false : true,
onChange: (_selectedRowKeys: string[], selectedRows: IParam[]) => {
checkStrictly: false,
onSelect: (record: IParam, selected: boolean, selectedRows: IParam[], $event: any) => {
if (selected) {
const { appDeKeyFieldName } = this.state;
const selectedRowKey: string = record[appDeKeyFieldName] || record.srfkey;
const index: number = useExpandedRowKeys.value.findIndex((key: string) => Object.is(key,selectedRowKey))
if (Object.is(index,-1) && record.children && record.children.length > 0) {
useExpandedRowKeys.value.push(selectedRowKey);
}
}
},
onChange: (_selectedRowKeys: string[], selectedRows: any[]) => {
this.state.selectedRowKeys = _selectedRowKeys;
const selection: IParam[] = [];
selectedRows.forEach((select: IParam) => {
......@@ -142,9 +158,11 @@ export class GridControl extends MDControl {
useRowKey,
useRowClassName,
useCustomRow,
useExpandedRowKeys,
useRowSelectionOption,
onResizeColumn,
onGridChange
onGridChange,
onExpandedRowsChange
}
}
......
......@@ -40,7 +40,7 @@ const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力
const { name, state, useCustom, onEditorEvent, onToolbarEvent, onActionColEvent, newRow, remove, save, load, refresh, getData } = new GridControl(ctrlState, props, emit).moduleInstall();
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange } = useCustom;
const { useScrollOption, useRowKey, useRowClassName, useCustomRow, useRowSelectionOption, onResizeColumn, onGridChange, useExpandedRowKeys, onExpandedRowsChange } = useCustom;
{{#if ctrl.batchToolBarItems}}
const renderBatchToolbar = (total: number, range: IParam[]) => {
return (
......@@ -73,6 +73,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
:sortDirections="['ascend', 'descend']"
:data-source="state.items"
:row-selection="useRowSelectionOption"
:expandedRowKeys="useExpandedRowKeys"
:columns="state.columnsModel"
{{#if ctrl.batchToolBarItems}}
:pagination="Object.assign(state.mdCtrlPaging.pagination, {
......@@ -86,6 +87,7 @@ defineExpose({ name, state, newRow, remove, save, load, refresh, getData });
:customRow="useCustomRow"
:rowClassName="useRowClassName"
@change="onGridChange"
@expandedRowsChange="onExpandedRowsChange"
@resizeColumn="onResizeColumn"
>
<template #emptyText>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册