fix: fix the display problem of table icon

vben

2020-11-28 de499a145556427304abe075b62e6869f44dc640

 src/components/Table/src/components/TableAction.tsx

@@ -2,8 +2,8 @@
import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import { DownOutlined } from '@ant-design/icons-vue';
import { ActionItem } from '../types/tableAction';
import Button from '/@/components/Button/index.vue';
import { ActionItem } from '/@/components/Table';
import { Button } from '/@/components/Button';
const prefixCls = 'basic-table-action';
export default defineComponent({
  name: 'TableAction',
@@ -16,114 +16,102 @@
      type: Array as PropType<ActionItem[]>,
      default: null,
    },

    moreText: {
      type: String as PropType<string>,
      default: '更多',
    },
  },
  setup(props) {
    function renderButton(action: ActionItem, index: number) {
      const { disabled = false, label, icon, color = '', type = 'link', ...actionProps } = action;
      const button = (
        <Button
          type={type}
          size="small"
          disabled={disabled}
          color={color}
          {...actionProps}
          key={`${index}-${label}`}
        >
          {() => (
            <>
              {icon && <Icon icon={icon} class="mr-1" />}
              {label}
            </>
          )}
        </Button>
      );
      return button;
    }

    function renderPopConfirm(action: ActionItem, index: number) {
      const { popConfirm = null } = action;
      if (!popConfirm) {
        return renderButton(action, index);
      }
      const {
        title,
        okText = '确定',
        cancelText = '取消',
        confirm = () => {},
        cancel = () => {},
        icon = '',
      } = popConfirm;
      return (
        <Popconfirm
          key={`p-${index}-${title}`}
          title={title}
          onConfirm={confirm}
          onCancel={cancel}
          okText={okText}
          cancelText={cancelText}
          icon={icon}
        >
          {() => renderButton(action, index)}
        </Popconfirm>
      );
    }

    const dropdownDefaultSLot = () => (
      <Button type="link" size="small">
        {{
          default: () => (
            <>
              {props.moreText}
              <DownOutlined />
            </>
          ),
        }}
      </Button>
    );

    // 增加按钮的TYPE和COLOR
    return () => {
      const { dropDownActions = [], actions } = props;
      return (
        <div class={prefixCls}>
          {actions &&
            actions.length &&
            actions.map((action, index) => {
              const {
                disabled = false,
                label,
                icon,
                color = '',
                type = 'link',
                popConfirm = null,
              } = action;
              const button = (
                <Button
                  type={type}
                  size="small"
                  disabled={disabled}
                  color={color}
                  {...action}
                  key={index}
                >
                  {() => (
                    <>
                      {label}
                      {icon && <Icon icon={icon} />}
                    </>
                  )}
                </Button>
              );
              if (popConfirm !== null) {
                const {
                  title,
                  okText = '确定',
                  cancelText = '取消',
                  confirm = () => {},
                  cancel = () => {},
                  icon = '',
                } = popConfirm;
                return (
                  <Popconfirm
                    key={`P-${index}`}
                    title={title}
                    onConfirm={confirm}
                    onCancel={cancel}
                    okText={okText}
                    cancelText={cancelText}
                    icon={icon}
                  >
                    {() => button}
                  </Popconfirm>
                );
              }
              return button;
              return renderPopConfirm(action, index);
            })}
          {dropDownActions && dropDownActions.length && (
            <Dropdown>
            <Dropdown overlayClassName="basic-tale-action-dropdown">
              {{
                default: () => (
                  <Button type="link" size="small">
                    {{
                      default: () => (
                        <>
                          更多
                          <DownOutlined />
                        </>
                      ),
                    }}
                  </Button>
                ),
                default: dropdownDefaultSLot,
                overlay: () => {
                  return (
                    <Menu>
                      {{
                        default: () => {
                          return dropDownActions.map((action, index) => {
                            const {
                              disabled = false,
                              label,
                              icon,
                              color = '',
                              type = 'link',
                            } = action;
                            const { disabled = false } = action;
                            action.ghost = true;
                            return (
                              <Menu.Item key={`${index}`} disabled={disabled}>
                                {() => (
                                  <Button
                                    type={type}
                                    size="small"
                                    {...action}
                                    disabled={disabled}
                                    color={color}
                                  >
                                    {{
                                      default: () => (
                                        <>
                                          {label}
                                          {icon && <Icon icon={icon} />}
                                        </>
                                      ),
                                    }}
                                  </Button>
                                )}
                                {() => {
                                  return renderPopConfirm(action, index);
                                }}
                              </Menu.Item>
                            );
                          });