bixi/packages/core/table/demo/simple-table-operations.md

企业级中后台前端解决方案

---
title:
  zh-CN: 操作菜单
  en-US: 操作菜单
order: 40
---

## zh-CN
操作菜单。bixi-table 支持加载任意层级的菜单结构，如果某个菜单包含子菜单，bixi-table 会自动为其生成可下拉的子菜单结构。

## en-US
操作菜单。bixi-table 支持加载任意层级的菜单结构，如果某个菜单包含子菜单，bixi-table 会自动为其生成可下拉的子菜单结构。

```ts
import {Component} from '@angular/core';
import {EColType, ICol, BixiTableService} from '@bixi/core/table';

interface IPerson {
  name: string;
  online: boolean;
}
const persons: IPerson[] = [{
  name: '阿丽',
  online: true,
}, {
  name: '阿明',
  online: false,
}];

@Component({
  selector: 'components-table-operations',
  template: `
    <button nz-button nzType="primary" (click)="onChangeAuth()">切换权限</button>
    {{hasAuth ? '有编辑权限' : '无编辑权限'}}
    <br>
    <bixi-table
      [id]="tableID"
      [rows]="rows"
      [cols]="cols"
      [loading]="loading">
    </bixi-table>
`
})
export class ComponentsTableSimpleTableOperationsComponent {
  hasAuth = false;
  loading = false;
  tableID = 'demo';
  rows = persons;

  constructor(private bixiTableService: BixiTableService) {}

  onChangeAuth() {
    this.hasAuth = !this.hasAuth;
    // 调用 service 更新特定 id 的组件，如果不传入 id，则更新所有 bixi-table 组件
    this.bixiTableService.updateView(this.tableID);
  }

  cols: ICol[] = [
     {
      name: 'Name',
      key: 'name',
    },
    {
      name: 'Operation',
      key: 'opt',
      type: EColType.operations,
      operations: () => {
        return [
          {
            name: 'View',
            visible: () => { return !this.hasAuth },
            onClick: (item: IPerson, index: number) => {
              console.warn(this.hasAuth, item, index);
            }
          },
          {
            name: 'Edit',
            visible: () => { return this.hasAuth },
            disabled: (row: IPerson) => {
              return !row.online;
            }
          },
          { 
            name: 'More',
            visible: true,
            children: [
              {
                name: 'Delete'
              },
              {
                name: 'Online',
                visible: (row: IPerson) => {
                  return !row.online;
                }
              },
              {
                name: 'Offline',
                visible: (row: IPerson) => {
                  return !!row.online;
                },
                children: [
                  {
                    name: 'Immediately',
                    disabled: true,
                  },
                  {
                    name: 'After 30mins',
                  },
                  {
                    name: 'After 24hours'
                  }
                ]
              }
            ]
          }
        ];
      }
    }
  ];
}
```