如何在ng2-smart-table中将操作项显示在下拉菜单中

直接调整settings里的actions配置块即可，组件v1.7.0及以上版本原生支持下拉模式，不需要额外自定义列渲染。

正确配置示例 #

将原有配置补充mode和actionTitle两个核心属性即可：

settings = {
  actions: {
    delete: true,
    add: false,
    edit: false,
    // 核心配置：指定操作项展示模式为下拉菜单
    mode: 'dropdown',
    // 下拉触发按钮显示的文本，可替换为图标HTML
    actionTitle: '操作',
    custom: [
      { name: 'edit', title: 'Edit' },
      { name: 'duplicate', title: 'duplicate' },
    ]
  },
  // 如果要给触发按钮使用图标，需要加这个配置避免HTML被转义
  // sanitize: false
}

配置说明 #

• 配置mode: 'dropdown'后，所有内置操作（删除/编辑/新增）和自定义操作都会自动收纳到操作列的下拉菜单中，和预期展示效果一致。
• 如果需要将触发按钮改为三点图标等样式，可将actionTitle设置为对应图标HTML，同时在settings根层级开启sanitize: false即可，示例：

  actionTitle: '<i class="fa fa-ellipsis-h"></i>'
  

• 下拉模式下自定义操作的事件监听逻辑和平铺模式完全一致，仍然通过监听表格的custom事件获取操作类型和行数据，不需要修改原有业务逻辑。
• 如果当前项目使用的ng2-smart-table版本低于v1.7.0，需要先升级组件版本才能使用该内置配置；低版本可通过自定义操作列渲染组件的方式手动实现下拉效果，优先推荐升级版本使用原生能力，维护成本最低。

内容的提问来源于stack exchange，提问作者ashwini nagrale