ng2-smart-table:如何在编辑模式下使用当前值预先选择下拉列表

ng2-smart-table是一个基于Angular的开源表格插件，用于快速构建数据表格界面。在编辑模式下使用当前值预先选择下拉列表，可以通过自定义编辑器来实现。

首先，需要在ng2-smart-table的配置中定义一个自定义的编辑器。在编辑器中，可以使用ng-select或其他下拉列表组件来实现预先选择下拉列表的功能。

以下是一个示例配置：

import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

@Component({
  template: `
    <ng-select [items]="options" [ngModel]="cell.newValue" (ngModelChange)="onSelect($event)">
    </ng-select>
  `,
})
export class CustomEditorComponent {
  cell: any;
  options: any[] = [
    { value: 'option1', title: 'Option 1' },
    { value: 'option2', title: 'Option 2' },
    { value: 'option3', title: 'Option 3' },
  ];

  constructor() {}

  onSelect(value: any) {
    this.cell.newValue = value;
  }
}

@Component({
  selector: 'app-table',
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `,
})
export class TableComponent {
  data: LocalDataSource;
  settings: any = {
    columns: {
      columnName: {
        title: 'Column Name',
        editor: {
          type: 'custom',
          component: CustomEditorComponent,
        },
      },
    },
  };

  constructor() {
    this.data = new LocalDataSource(data);
  }
}

在上述示例中，我们定义了一个CustomEditorComponent作为自定义编辑器，使用ng-select组件来展示下拉列表。在编辑器中，我们通过ngModel绑定当前值，并在选择新值时更新newValue属性。

然后，在ng2-smart-table的配置中，将编辑器类型设置为'custom'，并指定CustomEditorComponent作为编辑器组件。

这样，在表格的编辑模式下，当用户点击编辑按钮时，会显示预先选择下拉列表，并且当前值会被预先选中。

请注意，以上示例仅为演示目的，实际使用时需要根据具体情况进行适当修改。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云数据库（TencentDB）。您可以通过以下链接了解更多信息：