fix: fix the display problem of table icon

This commit is contained in:
vben 2020-11-28 17:25:35 +08:00
parent 4982786601
commit de499a1455
6 changed files with 21 additions and 13 deletions

View File

@ -26,10 +26,11 @@
### 🐛 Bug Fixes ### 🐛 Bug Fixes
- 修复 tree 文本超出挡住操作按钮问题 - tree: 修复文本超出挡住操作按钮问题
- 修复通过 useRedo 刷新页面参数丢失问题 - useRedo: 修复通过 useRedo 刷新页面参数丢失问题
- 修复表单校验先设置在校验及控制台错误信息问题 - form: 修复表单校验先设置在校验及控制台错误信息问题
- 修复`modal`与`drawer`组件传递数组参数问题 - `modal`&`drawer` 修复组件传递数组参数问题
- form: 修复`updateSchema`赋值含有`[]`时不生效
### 🎫 Chores ### 🎫 Chores

View File

@ -24,20 +24,20 @@ export default defineComponent({
}, },
setup(props) { setup(props) {
function renderButton(action: ActionItem, index: number) { function renderButton(action: ActionItem, index: number) {
const { disabled = false, label, icon, color = '', type = 'link' } = action; const { disabled = false, label, icon, color = '', type = 'link', ...actionProps } = action;
const button = ( const button = (
<Button <Button
type={type as any} type={type}
size="small" size="small"
disabled={disabled} disabled={disabled}
color={color} color={color}
{...action} {...actionProps}
key={`${index}-${label}`} key={`${index}-${label}`}
> >
{() => ( {() => (
<> <>
{icon && <Icon icon={icon} class="mr-1" />}
{label} {label}
{icon && <Icon icon={icon} />}
</> </>
)} )}
</Button> </Button>
@ -96,7 +96,7 @@ export default defineComponent({
return renderPopConfirm(action, index); return renderPopConfirm(action, index);
})} })}
{dropDownActions && dropDownActions.length && ( {dropDownActions && dropDownActions.length && (
<Dropdown> <Dropdown overlayClassName="basic-tale-action-dropdown">
{{ {{
default: dropdownDefaultSLot, default: dropdownDefaultSLot,
overlay: () => { overlay: () => {
@ -106,6 +106,7 @@ export default defineComponent({
default: () => { default: () => {
return dropDownActions.map((action, index) => { return dropDownActions.map((action, index) => {
const { disabled = false } = action; const { disabled = false } = action;
action.ghost = true;
return ( return (
<Menu.Item key={`${index}`} disabled={disabled}> <Menu.Item key={`${index}`} disabled={disabled}>
{() => { {() => {

View File

@ -24,6 +24,11 @@
&-action { &-action {
display: flex; display: flex;
button {
display: flex;
align-items: center;
}
} }
&-toolbar { &-toolbar {

View File

@ -1,10 +1,8 @@
export interface ActionItem { import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
export interface ActionItem extends ButtonProps {
onClick?: any; onClick?: any;
label: string; label: string;
disabled?: boolean;
color?: 'success' | 'error' | 'warning'; color?: 'success' | 'error' | 'warning';
type?: string;
props?: any;
icon?: string; icon?: string;
popConfirm?: PopConfirm; popConfirm?: PopConfirm;
} }

View File

@ -32,6 +32,7 @@ import {
Result, Result,
Empty, Empty,
Avatar, Avatar,
Menu,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { getApp } from '/@/setup/App'; import { getApp } from '/@/setup/App';
@ -78,5 +79,6 @@ export function registerGlobComp() {
.use(Result) .use(Result)
.use(Empty) .use(Empty)
.use(Avatar) .use(Avatar)
.use(Menu)
.use(Tabs); .use(Tabs);
} }

View File

@ -6,6 +6,7 @@
:actions="[ :actions="[
{ {
label: '删除', label: '删除',
icon: 'ant-design:area-chart-outlined',
onClick: handleDelete.bind(null, record), onClick: handleDelete.bind(null, record),
}, },
]" ]"