bixi/packages/core/editable-table/demo/col-relationship.md

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

---
title:
  zh-CN: 支持列关联
order: 9
---

## zh-CN

在编辑时，可以配置不同列之间的数据关联关系。

## en-US


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

@Component({
  selector: 'bixi-editable-demo-relation',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols"></bixi-editable-table>
  `
})
export class TestComponent {
  cols = [
    {
      key: 'name',
      name: '我能控制可编辑2(1)',
      onChange: (form: FormGroup) => {
        form.patchValue({
          relation: '我听1的',
        })
      }
    },
    {
      key: 'relation',
      name: '可编辑2(2)'
    },
    {
      key: 'content',
      name: '我能控制所有(3)',
      onChange: (form: FormGroup) => {
        form.patchValue({
          name: '我听3的',
          relation: '我听3的'
        })
      }
    }
  ];
  rows = [
    {
      name: '123',
      relation: '456',
      content: '789'
    }
  ];
}
```