diff --git a/src/table/_example/editable-cell.vue b/src/table/_example/editable-cell.vue index 31dec48ca..408b049fd 100644 --- a/src/table/_example/editable-cell.vue +++ b/src/table/_example/editable-cell.vue @@ -9,7 +9,6 @@ :editable-cell-state="editableCellState" bordered lazyLoad - @row-validate="onRowValidate" /> @@ -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: ({ @@ -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; }, // 用于提交前校验数据（示例代码有效，勿删） diff --git a/src/table/editable-cell.tsx b/src/table/editable-cell.tsx index 8aa05bba8..35b5f0999 100644 --- a/src/table/editable-cell.tsx +++ b/src/table/editable-cell.tsx @@ -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(); const classPrefix = usePrefixClass(); @@ -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 @@ -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, diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index 40e9e7fbe..8f37081a8 100644 --- a/src/table/table.en-US.md +++ b/src/table/table.en-US.md @@ -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) => { [eventName: string]: Function }` | N onEdited | Function | - | trigger on finishing editing。Typescript：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { 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` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { 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 diff --git a/src/table/table.md b/src/table/table.md index ec6370e5a..3b8e16846 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -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) => { [eventName: string]: Function }` | N onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: PrimaryTableOnEditedContext) => void` `type PrimaryTableOnEditedContext = PrimaryTableCellParams & { trigger: string; newRowData: T; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps` `type TableEditableCellProps = TablePlainObject \| ((params: TableEditableCellPropsParams) => TablePlainObject)` `interface TableEditableCellPropsParams extends PrimaryTableCellParams { 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 diff --git a/src/table/type.ts b/src/table/type.ts index 2285fb0be..2686f5267 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -870,6 +870,11 @@ export interface TableEditableCellConfig * @default false */ defaultEditable?: boolean; + /** + * 设置当前列的单元格始终保持为编辑态 + * @default false + */ + keepEditMode?: boolean; /** * 透传给编辑组件的事件 */ diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index ddb86c021..b07b9213c 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -101524,26 +101524,70 @@ exports[`csr snapshot test > csr test ./src/table/_example/editable-cell.vue 1`] class="" >
- 宣传物料制作费用 - - - - - +
+
+
+ + + 宣传物料制作费用 + + + + + +
+ + + + + + +
+
+
+ csr test ./src/table/_example/editable-cell.vue 1`] class="" >
- 宣传物料制作费用 - - - - - +
+
+
+ + + 宣传物料制作费用 + + + + + +
+ + + + + + +
+
+
+ csr test ./src/table/_example/editable-cell.vue 1`] class="" >
- 宣传物料制作费用、algolia 服务报销 - - - - - +
+
+
+ + + 宣传物料制作费用 + + + + + + + + +1 + + +
+ + + + + + +
+
+
+ csr test ./src/table/_example/editable-cell.vue 1`] class="" >
- 宣传物料制作费用 - - - - - +
+
+
+ + + 宣传物料制作费用 + + + + + +
+ + + + + + +
+
+
+ renders ./src/table/_example/drag-sort.vue correctl exports[`ssr snapshot test > renders ./src/table/_example/drag-sort-handler.vue correctly 1`] = `"
排序
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
"`; -exports[`ssr snapshot test > renders ./src/table/_example/editable-cell.vue correctly 1`] = `"
申请人
申请状态
申请事项
创建日期
审批通过
宣传物料制作费用
2022-01-01
审批过期
宣传物料制作费用
2022-02-01
王芳
审批失败
宣传物料制作费用
2022-03-01
审批通过
宣传物料制作费用、algolia 服务报销
2022-04-01
审批过期
宣传物料制作费用
2022-01-01
"`; +exports[`ssr snapshot test > renders ./src/table/_example/editable-cell.vue correctly 1`] = `"
申请人
申请状态
申请事项
创建日期
审批通过
宣传物料制作费用
2022-01-01
审批过期
宣传物料制作费用
2022-02-01
王芳
审批失败
宣传物料制作费用
2022-03-01
审批通过
宣传物料制作费用+1
2022-04-01
审批过期
宣传物料制作费用
2022-01-01
"`; exports[`ssr snapshot test > renders ./src/table/_example/editable-row.vue correctly 1`] = `"

申请人
申请状态
申请事项
创建日期
操作栏
贾明
宣传物料制作费用
保存取消
张三
审批过期
宣传物料制作费用
2022-02-01
编辑
王芳
审批失败
宣传物料制作费用
2022-03-01
编辑
贾明
审批通过
宣传物料制作费用、algolia 服务报销
2022-04-01
编辑
张三
审批过期
宣传物料制作费用
2022-01-01
编辑
"`;