Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
ee7c31db
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
ee7c31db
编写于
8月 27, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table): add `onValid` for editRow
为table的可编辑行添加校验方法
上级
a36825a6
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
40 addition
and
11 deletion
+40
-11
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+3
-1
src/components/Table/src/components/editable/EditableCell.vue
...components/Table/src/components/editable/EditableCell.vue
+1
-7
src/components/Table/src/components/editable/index.ts
src/components/Table/src/components/editable/index.ts
+13
-0
src/views/demo/table/EditRowTable.vue
src/views/demo/table/EditRowTable.vue
+23
-3
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
ee7c31db
### ✨ Features
-
**BasicForm**
表单组件新增
`Divider`
,用于较长表单的区域分割
-
**BasicTable**
单元格编辑新增提交回调,将根据回调函数返回的结果来决定是否将数据提交到表格
-
**BasicTable**
-
单元格编辑新增提交回调,将根据回调函数返回的结果来决定是否将数据提交到表格
-
行编辑添加校验方法,允许只校验而不提交值,以便异步保存数据成功后才提交倒表格
### 🐛 Bug Fixes
...
...
src/components/Table/src/components/editable/EditableCell.vue
浏览文件 @
ee7c31db
...
...
@@ -364,13 +364,7 @@
/* eslint-disable */
props
.
record
.
onSubmitEdit
=
async
()
=>
{
if
(
isArray
(
props
.
record
?.
submitCbs
))
{
const
validFns
=
(
props
.
record
?.
validCbs
||
[]).
map
((
fn
)
=>
fn
());
const
res
=
await
Promise
.
all
(
validFns
);
const
pass
=
res
.
every
((
item
)
=>
!!
item
);
if
(
!
pass
)
return
;
if
(
!
props
.
record
?.
onValid
?.())
return
;
const
submitFns
=
props
.
record
?.
submitCbs
||
[];
submitFns
.
forEach
((
fn
)
=>
fn
(
false
,
false
));
table
.
emit
?.(
'
edit-row-end
'
);
...
...
src/components/Table/src/components/editable/index.ts
浏览文件 @
ee7c31db
...
...
@@ -3,6 +3,7 @@ import type { BasicColumn } from '/@/components/Table/src/types/table';
import
{
h
,
Ref
}
from
'
vue
'
;
import
EditableCell
from
'
./EditableCell.vue
'
;
import
{
isArray
}
from
'
/@/utils/is
'
;
interface
Params
{
text
:
string
;
...
...
@@ -12,12 +13,23 @@ interface Params {
export
function
renderEditCell
(
column
:
BasicColumn
)
{
return
({
text
:
value
,
record
,
index
}:
Params
)
=>
{
record
.
onValid
=
async
()
=>
{
if
(
isArray
(
record
?.
validCbs
))
{
const
validFns
=
(
record
?.
validCbs
||
[]).
map
((
fn
)
=>
fn
());
const
res
=
await
Promise
.
all
(
validFns
);
return
res
.
every
((
item
)
=>
!!
item
);
}
else
{
return
false
;
}
};
record
.
onEdit
=
async
(
edit
:
boolean
,
submit
=
false
)
=>
{
if
(
!
submit
)
{
record
.
editable
=
edit
;
}
if
(
!
edit
&&
submit
)
{
if
(
!
(
await
record
.
onValid
()))
return
false
;
const
res
=
await
record
.
onSubmitEdit
?.();
if
(
res
)
{
record
.
editable
=
false
;
...
...
@@ -44,6 +56,7 @@ export function renderEditCell(column: BasicColumn) {
export
type
EditRecordRow
<
T
=
Recordable
>
=
Partial
<
{
onEdit
:
(
editable
:
boolean
,
submit
?:
boolean
)
=>
Promise
<
boolean
>
;
onValid
:
()
=>
Promise
<
boolean
>
;
editable
:
boolean
;
onCancel
:
Fn
;
onSubmit
:
Fn
;
...
...
src/views/demo/table/EditRowTable.vue
浏览文件 @
ee7c31db
...
...
@@ -21,6 +21,8 @@
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
import
{
treeOptionsListApi
}
from
'
/@/api/demo/tree
'
;
import
{
cloneDeep
}
from
'
lodash-es
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
const
columns
:
BasicColumn
[]
=
[
{
...
...
@@ -162,6 +164,7 @@
export
default
defineComponent
({
components
:
{
BasicTable
,
TableAction
},
setup
()
{
const
{
createMessage
:
msg
}
=
useMessage
();
const
currentEditKeyRef
=
ref
(
''
);
const
[
registerTable
]
=
useTable
({
title
:
'
可编辑行示例
'
,
...
...
@@ -192,9 +195,26 @@
}
async
function
handleSave
(
record
:
EditRecordRow
)
{
const
pass
=
await
record
.
onEdit
?.(
false
,
true
);
if
(
pass
)
{
currentEditKeyRef
.
value
=
''
;
// 校验
msg
.
loading
({
content
:
'
正在保存...
'
,
duration
:
0
,
key
:
'
saving
'
});
const
valid
=
await
record
.
onValid
?.();
if
(
valid
)
{
try
{
const
data
=
cloneDeep
(
record
.
editValueRefs
);
console
.
log
(
data
);
//TODO 此处将数据提交给服务器保存
// ...
// 保存之后提交编辑状态
const
pass
=
await
record
.
onEdit
?.(
false
,
true
);
if
(
pass
)
{
currentEditKeyRef
.
value
=
''
;
}
msg
.
success
({
content
:
'
数据已保存
'
,
key
:
'
saving
'
});
}
catch
(
error
)
{
msg
.
error
({
content
:
'
保存失败
'
,
key
:
'
saving
'
});
}
}
else
{
msg
.
error
({
content
:
'
请填写正确的数据
'
,
key
:
'
saving
'
});
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录