Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(table): support TableEditableCellConfig.keepEditMode #2662

Merged
merged 2 commits into from
Aug 3, 2023
Merged

feat(table): support TableEditableCellConfig.keepEditMode #2662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2fd69c
feat(table): support TableEditableCellConfig.keepEditMode
chaishi Aug 3, 2023
0472c1b
test: update snapshots
chaishi Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions src/table/_example/editable-cell.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
:editable-cell-state="editableCellState"
bordered
lazyLoad
@row-validate="onRowValidate"
/>
<!-- 示例代码有效，勿删 -->
<!-- <t-button @click="validateTableData">校验</t-button> -->
Expand Down Expand Up @@ -128,6 +127,8 @@ export default {
cell: (h, { row }) => row.letters.join('、'),
edit: {
component: Select,
keepEditMode: true,
rules: [{ validator: (val) => val.length > 0, message: '至少选择一种' }],
// props, 透传全部属性到 Select 组件
// props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
props: ({
Expand Down Expand Up @@ -186,11 +187,9 @@ export default {
methods: {
// 用于控制哪些行或哪些单元格不允许出现编辑态
editableCellState(cellParams) {
const { row } = cellParams;
return row.status !== 2;
},
onRowValidate(params) {
console.log('validate:', params);
const { rowIndex } = cellParams;
// return row.status !== 2;
return rowIndex !== 2;
},

// 用于提交前校验数据（示例代码有效，勿删）
Expand Down
15 changes: 13 additions & 2 deletions src/table/editable-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ export default defineComponent({
setup(props: EditableCellProps, context: SetupContext) {
const { row, col } = toRefs(props);
const tableEditableCellRef = ref(null);
const isEdit = ref(props.col.edit?.defaultEditable || false);

const isKeepEditMode = computed(() => col.value.edit?.keepEditMode);

const isEdit = ref(isKeepEditMode.value || col.value.edit?.defaultEditable || false);
const editValue = ref();
const errorList = ref<AllValidateResult[]>();
const classPrefix = usePrefixClass();
Expand All @@ -90,6 +93,12 @@ export default defineComponent({
editValue.value = val;
};

watch([isKeepEditMode], (val) => {
if (val) {
isEdit.value = true;
}
});

const editOnListeners = computed(() => {
const listeners = col.value.edit?.on?.({ ...cellParams.value, editedRow: currentRow.value, updateEditedCellValue }) || {};
// example: onEnter-> enter
Expand Down Expand Up @@ -213,7 +222,9 @@ export default defineComponent({
editOnListeners.value[eventName]?.(args[2]);
// 此处必须在事件执行完成后异步销毁编辑组件，否则会导致事件清除不及时引起的其他问题
const timer = setTimeout(() => {
isEdit.value = false;
if (!isKeepEditMode.value) {
isEdit.value = false;
}
errorList.value = [];
props.onEditableChange?.({
...cellParams.value,
Expand Down
1 change: 1 addition & 0 deletions src/table/table.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ name | type | default | description | required
abortEditOnEvent | Array | - | Typescript：`string[]` | N
component | \- | - | component definition。Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
defaultEditable | Boolean | false | set default editable once | N
keepEditMode | Boolean | false | set table cell always to be editable | N
on | Function | - | Typescript：`(context: TableEditableCellPropsParams<T>) => { [eventName: string]: Function }` | N
onEdited | Function | - | trigger on finishing editing。Typescript：`(context: PrimaryTableOnEditedContext<T>) => void` `type PrimaryTableOnEditedContext<T> = PrimaryTableCellParams<T> & { trigger: string; newRowData: T; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject \| ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
Expand Down
1 change: 1 addition & 0 deletions src/table/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ placement | String | top-right | 列配置按钮基于表格的放置位置：
abortEditOnEvent | Array | - | 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态。示例：`abortEditOnEvent: ['onChange']`。TS 类型：`string[]` | N
component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定义的组件（非组件库内的组件），组件需要支持 `value` 和 `onChange` ；如果还需要支持校验规则，则组件还需实现 `tips` 和 `status` 两个 API，实现规则可参考 `Input` 组件。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
defaultEditable | Boolean | false | 单元格默认状态是否为编辑态 | N
keepEditMode | Boolean | false | 设置当前列的单元格始终保持为编辑态 | N
on | Function | - | 透传给编辑组件的事件。TS 类型：`(context: TableEditableCellPropsParams<T>) => { [eventName: string]: Function }` | N
onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: PrimaryTableOnEditedContext<T>) => void` `type PrimaryTableOnEditedContext<T> = PrimaryTableCellParams<T> & { trigger: string; newRowData: T; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject \| ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
Expand Down
5 changes: 5 additions & 0 deletions src/table/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,11 @@ export interface TableEditableCellConfig<T extends TableRowData = TableRowData>
* @default false
*/
defaultEditable?: boolean;
/**
* 设置当前列的单元格始终保持为编辑态
* @default false
*/
keepEditMode?: boolean;
/**
* 透传给编辑组件的事件
*/
Expand Down
Loading
Loading