Table

表格，用于显示二维数据。

使用

<m-table id="myTable"></m-table>
<script>
  const table = document.querySelector('#myTable')
  table.checkbox = true
  table.dataSource = [{
    id: 1,
    name: 'xwang',
    age: 18,
    address: 'Tencent'
  }, {
    id: 2,
    name: 'dntzhang',
    age: 12,
    address: 'Tencent'
  }, {
    id: 3,
    name: 'lucy',
    age: 12,
    address: 'Tencent'
  }, {
    id: 4,
    name: 'john',
    age: 12,
    address: 'Tencent'
  }, {
    id: 5,
    name: 'tim',
    age: 12,
    address: 'Tencent'
  }]
  table.columns = [{
    title: 'Name',
    key: 'name',
  }, {
    title: 'Age',
    key: 'age',
  }, {
    title: 'Address',
    key: 'address',
  }, {
    title: '操作',
    render: (item) => (
      Omi.html`<span>
        <a href="javascript:;" onClick=${e => {
          table.dataSource.splice(table.dataSource.indexOf(item), 1)
          table.update()
        }}>Delete</a>
      </span>`
    )
  }]
  table.update()
</script>

Omi 中使用

<m-table
  checkbox
  dataSource={this.dataSource}
  columns={this.columns}>
</m-table>

API

Props

{
    dataSource: any[],
    columns: any[],
    checkbox?: boolean
}