---
title:
  zh-CN: 支持拖拽
order: 11
---

## zh-CN

组件的用法

## en-US

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'bixi-editable-demo-simple',
  template: `
    <button nz-button nzType="primary" (click)="onClick()">{{dragable? '切换为不可拖拽' : '切换为可拖拽'}}</button>
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols" [dragable]="dragable"></bixi-editable-table>
  `
})
export class TestComponent {
  dragable = true;
  cols = [
    {
      key: 'name',
      name: '可拖拽编辑1'
    },
    {
      key: 'relation',
      name: '可拖拽编辑2'
    }
  ];
  rows = [
    {
      name: '组合1',
      relation: '等于',
      content: '字段1',
      desc: 'A类型'
    },
    {
      name: '组合2',
      relation: '小于',
      content: '字段2',
      desc: 'B类型'
    }
  ]

  onClick() {
    this.dragable = !this.dragable;
  }
}
```