Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Lucky高
vue-vben-admin
提交
b63f7d17
V
vue-vben-admin
项目概览
Lucky高
/
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 搜索 >>
未验证
提交
b63f7d17
编写于
1月 18, 2022
作者:
L
lzdjack
提交者:
GitHub
1月 18, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 增强可编辑单元格功能 (#1576)
1. 增加可编辑单元格非编辑状态下可自定义样式 2. 扩展editComponentProps,可接受方法
上级
67d514ad
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
100 addition
and
54 deletion
+100
-54
src/components/Table/src/components/editable/EditableCell.vue
...components/Table/src/components/editable/EditableCell.vue
+74
-52
src/components/Table/src/types/table.ts
src/components/Table/src/types/table.ts
+15
-1
src/views/demo/table/EditCellTable.vue
src/views/demo/table/EditCellTable.vue
+11
-1
未找到文件。
src/components/Table/src/components/editable/EditableCell.vue
浏览文件 @
b63f7d17
<
template
>
<div
:class=
"prefixCls"
>
<div
v-show=
"!isEdit"
:class=
"
{ [`${prefixCls}__normal`]: true, 'ellipsis-cell': column.ellipsis }"
@click="handleEdit"
>
<div
class=
"cell-content"
:title=
"column.ellipsis ? getValues ?? '' : ''"
>
{{
getValues
||
getValues
===
0
?
getValues
:
'
'
}}
</div>
<FormOutlined
:class=
"`$
{prefixCls}__normal-icon`" v-if="!column.editRow" />
</div>
<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>
</a-spin>
</div>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"tsx"
>
import
type
{
CSSProperties
,
PropType
}
from
'
vue
'
;
import
{
computed
,
defineComponent
,
nextTick
,
ref
,
toRaw
,
unref
,
watchEffect
}
from
'
vue
'
;
import
type
{
BasicColumn
}
from
'
../../types/table
'
;
...
...
@@ -56,7 +20,7 @@
export
default
defineComponent
({
name
:
'
EditableCell
'
,
components
:
{
FormOutlined
,
CloseOutlined
,
CheckOutlined
,
CellComponent
,
ASpin
:
Spin
},
components
:
{
FormOutlined
,
CloseOutlined
,
CheckOutlined
,
CellComponent
,
Spin
},
directives
:
{
clickOutside
,
},
...
...
@@ -100,13 +64,6 @@
});
const
getComponentProps
=
computed
(()
=>
{
const
compProps
=
props
.
column
?.
editComponentProps
??
{};
const
component
=
unref
(
getComponent
);
const
apiSelectProps
:
Recordable
=
{};
if
(
component
===
'
ApiSelect
'
)
{
apiSelectProps
.
cache
=
true
;
}
const
isCheckValue
=
unref
(
getIsCheckComp
);
const
valueField
=
isCheckValue
?
'
checked
'
:
'
value
'
;
...
...
@@ -114,19 +71,30 @@
const
value
=
isCheckValue
?
(
isNumber
(
val
)
&&
isBoolean
(
val
)
?
val
:
!!
val
)
:
val
;
let
compProps
=
props
.
column
?.
editComponentProps
??
{};
const
{
record
,
column
,
index
}
=
props
;
if
(
isFunction
(
compProps
))
{
compProps
=
compProps
({
text
:
val
,
record
,
column
,
index
})
??
{};
}
const
component
=
unref
(
getComponent
);
const
apiSelectProps
:
Recordable
=
{};
if
(
component
===
'
ApiSelect
'
)
{
apiSelectProps
.
cache
=
true
;
}
return
{
size
:
'
small
'
,
getPopupContainer
:
()
=>
unref
(
table
?.
wrapRef
.
value
)
??
document
.
body
,
getCalendarContainer
:
()
=>
unref
(
table
?.
wrapRef
.
value
)
??
document
.
body
,
placeholder
:
createPlaceholderMessage
(
unref
(
getComponent
)),
...
apiSelectProps
,
...
omit
(
compProps
,
'
onChange
'
),
[
valueField
]:
value
,
};
}
as
any
;
});
const
getValues
=
computed
(()
=>
{
const
{
edit
ComponentProps
,
edit
ValueMap
}
=
props
.
column
;
const
{
editValueMap
}
=
props
.
column
;
const
value
=
unref
(
currentValueRef
);
...
...
@@ -139,7 +107,8 @@
return
value
;
}
const
options
:
LabelValueOptions
=
editComponentProps
?.
options
??
(
unref
(
optionsRef
)
||
[]);
const
options
:
LabelValueOptions
=
unref
(
getComponentProps
)?.
options
??
(
unref
(
optionsRef
)
||
[]);
const
option
=
options
.
find
((
item
)
=>
`
${
item
.
value
}
`
===
`
${
value
}
`
);
return
option
?.
label
??
value
;
...
...
@@ -197,7 +166,7 @@
}
else
if
(
isString
(
e
)
||
isBoolean
(
e
)
||
isNumber
(
e
))
{
currentValueRef
.
value
=
e
;
}
const
onChange
=
props
.
column
?.
editComponentProps
?.
onChange
;
const
onChange
=
unref
(
getComponentProps
)
?.
onChange
;
if
(
onChange
&&
isFunction
(
onChange
))
onChange
(...
arguments
);
table
.
emit
?.(
'
edit-change
'
,
{
...
...
@@ -322,7 +291,7 @@
// only ApiSelect or TreeSelect
function
handleOptionsChange
(
options
:
LabelValueOptions
)
{
const
{
replaceFields
}
=
props
.
column
?.
editComponentProps
??
{}
;
const
{
replaceFields
}
=
unref
(
getComponentProps
)
;
const
component
=
unref
(
getComponent
);
if
(
component
===
'
ApiTreeSelect
'
)
{
const
{
title
=
'
title
'
,
value
=
'
value
'
,
children
=
'
children
'
}
=
replaceFields
||
{};
...
...
@@ -355,7 +324,7 @@
if
(
props
.
column
.
dataIndex
)
{
if
(
!
props
.
record
.
editValueRefs
)
props
.
record
.
editValueRefs
=
{};
props
.
record
.
editValueRefs
[
props
.
column
.
dataIndex
]
=
currentValueRef
;
props
.
record
.
editValueRefs
[
props
.
column
.
dataIndex
as
any
]
=
currentValueRef
;
}
/* eslint-disable */
props
.
record
.
onCancelEdit
=
()
=>
{
...
...
@@ -398,6 +367,59 @@
spinning
,
};
},
render
()
{
return
(
<
div
class
=
{
this
.
prefixCls
}
>
<
div
v
-
show
=
{
!
this
.
isEdit
}
class
=
{{
[
`
${
this
.
prefixCls
}
__normal`
]:
true
,
'
ellipsis-cell
'
:
this
.
column
.
ellipsis
}}
onClick
=
{
this
.
handleEdit
}
>
<
div
class
=
"
cell-content
"
title
=
{
this
.
column
.
ellipsis
?
this
.
getValues
??
''
:
''
}
>
{
this
.
column
.
editRender
?
this
.
column
.
editRender
({
text
:
this
.
value
,
record
:
this
.
record
as
Recordable
,
column
:
this
.
column
,
index
:
this
.
index
,
})
:
this
.
getValues
?
this
.
getValues
:
'
\
u00A0
'
}
<
/div
>
{
!
this
.
column
.
editRow
&&
<
FormOutlined
class
=
{
`
${
this
.
prefixCls
}
__normal-icon`
}
/>
}
<
/div
>
{
this
.
isEdit
&&
(
<
Spin
spinning
=
{
this
.
spinning
}
>
<
div
class
=
{
`
${
this
.
prefixCls
}
__wrapper`
}
v
-
click
-
outside
=
{
this
.
onClickOutside
}
>
<
CellComponent
{...
this
.
getComponentProps
}
component
=
{
this
.
getComponent
}
style
=
{
this
.
getWrapperStyle
}
popoverVisible
=
{
this
.
getRuleVisible
}
rule
=
{
this
.
getRule
}
ruleMessage
=
{
this
.
ruleMessage
}
class
=
{
this
.
getWrapperClass
}
ref
=
"
elRef
"
onChange
=
{
this
.
handleChange
}
onOptionsChange
=
{
this
.
handleOptionsChange
}
onPressEnter
=
{
this
.
handleEnter
}
/
>
{
!
this
.
getRowEditable
&&
(
<
div
class
=
{
`
${
this
.
prefixCls
}
__action`
}
>
<
CheckOutlined
class
=
{[
`
${
this
.
prefixCls
}
__icon`
,
'
mx-2
'
]}
onClick
=
{
this
.
handleSubmitClick
}
/
>
<
CloseOutlined
class
=
{
`
${
this
.
prefixCls
}
__icon `
}
onClick
=
{
this
.
handleCancel
}
/
>
<
/div
>
)}
<
/div
>
<
/Spin
>
)}
<
/div
>
);
},
});
</
script
>
<
style
lang=
"less"
>
...
...
src/components/Table/src/types/table.ts
浏览文件 @
b63f7d17
...
...
@@ -441,7 +441,14 @@ export interface BasicColumn extends ColumnProps {
editRow
?:
boolean
;
editable
?:
boolean
;
editComponent
?:
ComponentType
;
editComponentProps
?:
Recordable
;
editComponentProps
?:
|
((
opt
:
{
text
:
string
|
number
|
boolean
|
Recordable
;
record
:
Recordable
;
column
:
BasicColumn
;
index
:
number
;
})
=>
Recordable
)
|
Recordable
;
editRule
?:
boolean
|
((
text
:
string
,
record
:
Recordable
)
=>
Promise
<
string
>
);
editValueMap
?:
(
value
:
any
)
=>
string
;
onEditRow
?:
()
=>
void
;
...
...
@@ -449,6 +456,13 @@ export interface BasicColumn extends ColumnProps {
auth
?:
RoleEnum
|
RoleEnum
[]
|
string
|
string
[];
// 业务控制是否显示
ifShow
?:
boolean
|
((
column
:
BasicColumn
)
=>
boolean
);
// 自定义修改后显示的内容
editRender
?:
(
opt
:
{
text
:
string
|
number
|
boolean
|
Recordable
;
record
:
Recordable
;
column
:
BasicColumn
;
index
:
number
;
})
=>
VNodeChild
|
JSX
.
Element
;
}
export
type
ColumnChangeParam
=
{
...
...
src/views/demo/table/EditCellTable.vue
浏览文件 @
b63f7d17
...
...
@@ -9,13 +9,14 @@
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
,
h
}
from
'
vue
'
;
import
{
BasicTable
,
useTable
,
BasicColumn
}
from
'
/@/components/Table
'
;
import
{
optionsListApi
}
from
'
/@/api/demo/select
'
;
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
import
{
treeOptionsListApi
}
from
'
/@/api/demo/tree
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
Progress
}
from
'
ant-design-vue
'
;
const
columns
:
BasicColumn
[]
=
[
{
title
:
'
输入框
'
,
...
...
@@ -60,6 +61,15 @@
editRule
:
true
,
editComponent
:
'
InputNumber
'
,
width
:
200
,
editComponentProps
:
()
=>
{
return
{
max
:
100
,
min
:
0
,
};
},
editRender
:
({
text
})
=>
{
return
h
(
Progress
,
{
percent
:
Number
(
text
)
});
},
},
{
title
:
'
下拉框
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录