Skip to content

Commit

Permalink
feat(table): support TableEditableCellConfig.keepEditMode (#2662)
Browse files Browse the repository at this point in the history
* feat(table): support TableEditableCellConfig.keepEditMode

* test: update snapshots
  • Loading branch information
chaishi authored Aug 3, 2023
1 parent 69f3934 commit 455e146
Show file tree
Hide file tree
Showing 7 changed files with 277 additions and 77 deletions.
11 changes: 5 additions & 6 deletions src/table/_example/editable-cell.vue
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
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
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
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
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

0 comments on commit 455e146

Please sign in to comment.