我正在尝试向自定义操作添加按钮,但是该操作未添加新列,从而使按钮与其他按钮重叠。
代码:
settings = {
actions: {
custom: [
{
name: 'Button',
title: 'Button ',
}
],
},
columns: {
name: {
title: 'Full name'
},
email: {
title: 'Email'
},
lastLogin: {
title: 'Last Login'
}
}
};
我需要在图像上添加一个链接,因为我在这里的声誉不高,并且图像工具对我来说被阻止。
我在做什么错了?
答案 0 :(得分:4)
您可以尝试一下。 将设置更改为:
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
: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;
}
答案 1 :(得分:0)
现在,您可以像下面一样使用来更改ng2智能表的操作图标。您可以使用position: "right"
属性更改操作列的侧面。有关更多信息,请参见
settings = {
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmSave: true
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true
},
columns: {
id: {
title: "Id",
filter: true
},
name: {
title: "Name",
filter: true
},
transport: {
title: "Transport",
filter: true,
valuePrepareFunction: value => {
return value === 1 ? "Yes" : "No";
}
},
route: {
title: "Route",
filter: true
},
telephone: {
title: "Telephone",
filter: true
},
mobile: {
title: "Mobile",
filter: true
},
land_name: {
title: "Land Name",
filter: false
}
},
actions: {
add: false,
position: "right"
},
pager: {
display: true,
perPage: 10
}
};
答案 2 :(得分:0)
angular已弃用/deep/
组合器,因此针对同一问题执行了以下操作:
在全局CSS中添加了样式类:
.ng2-custom-actions-inline {
.ng2-smart-action-custom-custom {
display: inline-block !important;
height: auto !important;
width: auto !important;
}
}
在智能表的设置数组中设置settings.rowClassFunction
属性:
rowClassFunction: (row) => { return 'ng2-custom-actions-inline' }
我从这个答案中得到了一个线索:
https://github.com/akveo/ng2-smart-table/issues/779#issuecomment-428494547
答案 3 :(得分:0)
// final solution
(...args) => event(...args, client, Discord)
答案 4 :(得分:-1)
还有另一个 css 来对齐项目,
::ng-deep {
ng2-st-tbody-edit-delete {
display: none;
height: 0 !important;
}
ng2-st-tbody-custom {
display: flex;
text-align: center;
}
}`