添加自定义操作按钮-ng2-smart-table [英] Add custom action button - ng2-smart-table

问题描述

我正在尝试向自定义操作添加按钮，但是未在操作中添加新列，从而使按钮与其他按钮重叠.

I'm trying to add a button to custom action, but a new column is not added in the action, making the button overlap with the others.

代码:

settings = {
    actions: {
      custom: [
        {
          name: 'Button',
          title: 'Button ',
        }
      ],
    },
    columns: {
      name: {
        title: 'Full name'
      },
      email: {
        title: 'Email'
      },
      lastLogin: {
        title: 'Last Login'
      }
    }
  };

我需要在图像上添加一个链接，因为我在这里的声誉不高，并且图像工具对我来说被阻止了.

I needed to put a link to the image, because I have little reputation here and the image tool is blocked for me.

反应图片:

我在做什么错了?

推荐答案

您可以尝试一下. 将设置更改为:

you can try this. change your setting to:

settings = {
hideSubHeader: true,
actions: {
  custom: [
    {
      name: 'yourAction',
      title: '<i class="ion-document" title="YourAction"></i>'
    },
    {
      name: 'editAction',
      title: '<i class="ion-edit" title="Edit"></i>'
    },
    {
      name: 'deleteAction',
      title: '<i class="far fa-trash-alt" title="delete"></i>'
    }
  ],
  add: false,
  edit: false,
  delete: false
}
...
};

然后将其添加到您的component.scss

then add this into your component.scss

    :host /deep/ ng2-st-tbody-edit-delete {display: flex !important;
  height: 0 !important;
}

:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
  display: inline-block;
  width: 50px;
  text-align: center;
  font-size: 1.1em;
}

:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom:hover {
  color: #5dcfe3;
}

这篇关于添加自定义操作按钮-ng2-smart-table的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！