Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
2c867b3d
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
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,发现更多精彩内容 >>
提交
2c867b3d
编写于
8月 19, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table): add `beforeEditSubmit` for editable cell
单元格编辑功能新增提交回调
上级
fb43fad5
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
117 addition
and
21 deletion
+117
-21
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+1
-0
src/components/Table/src/components/editable/EditableCell.vue
...components/Table/src/components/editable/EditableCell.vue
+54
-20
src/components/Table/src/props.ts
src/components/Table/src/props.ts
+10
-0
src/components/Table/src/types/table.ts
src/components/Table/src/types/table.ts
+12
-0
src/views/demo/table/EditCellTable.vue
src/views/demo/table/EditCellTable.vue
+40
-1
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
2c867b3d
### ✨ Features
-
**BasicForm**
表单组件新增
`Divider`
,用于较长表单的区域分割
-
**BasicTable**
单元格编辑新增提交回调,将根据回调函数返回的结果来决定是否将数据提交到表格
### 🐛 Bug Fixes
...
...
src/components/Table/src/components/editable/EditableCell.vue
浏览文件 @
2c867b3d
...
...
@@ -11,25 +11,27 @@
<FormOutlined
:class=
"`$
{prefixCls}__normal-icon`" v-if="!column.editRow" />
</div>
<div
v-if=
"isEdit"
:class=
"`$
{prefixCls}__wrapper`" v-click-outside="onClickOutside">
<CellComponent
v-bind=
"getComponentProps"
:component=
"getComponent"
:style=
"getWrapperStyle"
:popoverVisible=
"getRuleVisible"
:rule=
"getRule"
:ruleMessage=
"ruleMessage"
:class=
"getWrapperClass"
ref=
"elRef"
@
change=
"handleChange"
@
options-change=
"handleOptionsChange"
@
pressEnter=
"handleEnter"
/>
<div
:class=
"`$
{prefixCls}__action`" v-if="!getRowEditable">
<CheckOutlined
:class=
"[`$
{prefixCls}__icon`, 'mx-2']" @click="handleSubmitClick" />
<CloseOutlined
:class=
"`$
{prefixCls}__icon `" @click="handleCancel" />
<a-spin
v-if=
"isEdit"
:spinning=
"spinning"
>
<div
:class=
"`$
{prefixCls}__wrapper`" v-click-outside="onClickOutside">
<CellComponent
v-bind=
"getComponentProps"
:component=
"getComponent"
:style=
"getWrapperStyle"
:popoverVisible=
"getRuleVisible"
:rule=
"getRule"
:ruleMessage=
"ruleMessage"
:class=
"getWrapperClass"
ref=
"elRef"
@
change=
"handleChange"
@
options-change=
"handleOptionsChange"
@
pressEnter=
"handleEnter"
/>
<div
:class=
"`$
{prefixCls}__action`" v-if="!getRowEditable">
<CheckOutlined
:class=
"[`$
{prefixCls}__icon`, 'mx-2']" @click="handleSubmitClick" />
<CloseOutlined
:class=
"`$
{prefixCls}__icon `" @click="handleCancel" />
</div>
</div>
</
div
>
</
a-spin
>
</div>
</
template
>
<
script
lang=
"ts"
>
...
...
@@ -48,12 +50,13 @@
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
import
{
isArray
,
isBoolean
,
isFunction
,
isNumber
,
isString
}
from
'
/@/utils/is
'
;
import
{
createPlaceholderMessage
}
from
'
./helper
'
;
import
{
omit
,
set
}
from
'
lodash-es
'
;
import
{
omit
,
pick
,
set
}
from
'
lodash-es
'
;
import
{
treeToList
}
from
'
/@/utils/helper/treeHelper
'
;
import
{
Spin
}
from
'
ant-design-vue
'
;
export
default
defineComponent
({
name
:
'
EditableCell
'
,
components
:
{
FormOutlined
,
CloseOutlined
,
CheckOutlined
,
CellComponent
},
components
:
{
FormOutlined
,
CloseOutlined
,
CheckOutlined
,
CellComponent
,
ASpin
:
Spin
},
directives
:
{
clickOutside
,
},
...
...
@@ -80,6 +83,7 @@
const
optionsRef
=
ref
<
LabelValueOptions
>
([]);
const
currentValueRef
=
ref
<
any
>
(
props
.
value
);
const
defaultValueRef
=
ref
<
any
>
(
props
.
value
);
const
spinning
=
ref
<
boolean
>
(
false
);
const
{
prefixCls
}
=
useDesign
(
'
editable-cell
'
);
...
...
@@ -246,6 +250,35 @@
const
dataKey
=
(
dataIndex
||
key
)
as
string
;
if
(
!
record
.
editable
)
{
const
{
getBindValues
}
=
table
;
const
{
beforeEditSubmit
,
columns
}
=
unref
(
getBindValues
);
if
(
beforeEditSubmit
&&
isFunction
(
beforeEditSubmit
))
{
spinning
.
value
=
true
;
const
keys
:
string
[]
=
columns
.
map
((
_column
)
=>
_column
.
dataIndex
)
.
filter
((
field
)
=>
!!
field
)
as
string
[];
let
result
:
any
=
true
;
try
{
result
=
await
beforeEditSubmit
({
record
:
pick
(
record
,
keys
),
index
,
key
,
value
,
});
}
catch
(
e
)
{
result
=
false
;
}
finally
{
spinning
.
value
=
false
;
}
if
(
result
===
false
)
{
return
;
}
}
}
set
(
record
,
dataKey
,
value
);
//const record = await table.updateTableData(index, dataKey, value);
needEmit
&&
table
.
emit
?.(
'
edit-end
'
,
{
record
,
index
,
key
,
value
});
...
...
@@ -368,6 +401,7 @@
getValues
,
handleEnter
,
handleSubmitClick
,
spinning
,
};
},
});
...
...
src/components/Table/src/props.ts
浏览文件 @
2c867b3d
...
...
@@ -126,4 +126,14 @@ export const basicProps = {
type
:
Object
as
PropType
<
{
x
:
number
|
true
;
y
:
number
}
>
,
default
:
null
,
},
beforeEditSubmit
:
{
type
:
Function
as
PropType
<
(
data
:
{
record
:
Recordable
;
index
:
number
;
key
:
string
|
number
;
value
:
any
;
})
=>
Promise
<
any
>
>
,
},
};
src/components/Table/src/types/table.ts
浏览文件 @
2c867b3d
...
...
@@ -362,6 +362,18 @@ export interface BasicTableProps<T = any> {
*/
transformCellText
?:
Function
;
/**
* Callback executed before editable cell submit value, not for row-editor
*
* The cell will not submit data while callback return false
*/
beforeEditSubmit
?:
(
data
:
{
record
:
Recordable
;
index
:
number
;
key
:
string
|
number
;
value
:
any
;
})
=>
Promise
<
any
>
;
/**
* Callback executed when pagination, filters or sorter is changed
* @param pagination
...
...
src/views/demo/table/EditCellTable.vue
浏览文件 @
2c867b3d
...
...
@@ -4,6 +4,7 @@
@
register=
"registerTable"
@
edit-end=
"handleEditEnd"
@
edit-cancel=
"handleEditCancel"
:beforeEditSubmit=
"beforeEditSubmit"
/>
</div>
</
template
>
...
...
@@ -14,6 +15,7 @@
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
import
{
treeOptionsListApi
}
from
'
/@/api/demo/tree
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
const
columns
:
BasicColumn
[]
=
[
{
title
:
'
输入框
'
,
...
...
@@ -93,7 +95,7 @@
},
{
title
:
'
远程下拉树
'
,
dataIndex
:
'
name7
'
,
dataIndex
:
'
name7
1
'
,
edit
:
true
,
editComponent
:
'
ApiTreeSelect
'
,
editRule
:
false
,
...
...
@@ -157,8 +159,44 @@
bordered
:
true
,
});
const
{
createMessage
}
=
useMessage
();
function
handleEditEnd
({
record
,
index
,
key
,
value
}:
Recordable
)
{
console
.
log
(
record
,
index
,
key
,
value
);
return
false
;
}
// 模拟将指定数据保存
function
feakSave
({
value
,
key
,
id
})
{
createMessage
.
loading
({
content
:
`正在模拟保存
${
key
}
`
,
key
:
'
_save_fake_data
'
,
duration
:
0
,
});
return
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
if
(
value
===
''
)
{
createMessage
.
error
({
content
:
'
保存失败:不能为空
'
,
key
:
'
_save_fake_data
'
,
duration
:
2
,
});
resolve
(
false
);
}
else
{
createMessage
.
success
({
content
:
`记录
${
id
}
的
${
key
}
已保存`
,
key
:
'
_save_fake_data
'
,
duration
:
2
,
});
resolve
(
true
);
}
},
2000
);
});
}
async
function
beforeEditSubmit
({
record
,
index
,
key
,
value
})
{
console
.
log
(
'
单元格数据正在准备提交
'
,
{
record
,
index
,
key
,
value
});
return
await
feakSave
({
id
:
record
.
id
,
key
,
value
});
}
function
handleEditCancel
()
{
...
...
@@ -169,6 +207,7 @@
registerTable
,
handleEditEnd
,
handleEditCancel
,
beforeEditSubmit
,
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录