Table

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

使用

  1. <m-table id="myTable"></m-table>
  2. <script>
  3. const table = document.querySelector('#myTable')
  4. table.checkbox = true
  5. table.dataSource = [{
  6. id: 1,
  7. name: 'xwang',
  8. age: 18,
  9. address: 'Tencent'
  10. }, {
  11. id: 2,
  12. name: 'dntzhang',
  13. age: 12,
  14. address: 'Tencent'
  15. }, {
  16. id: 3,
  17. name: 'lucy',
  18. age: 12,
  19. address: 'Tencent'
  20. }, {
  21. id: 4,
  22. name: 'john',
  23. age: 12,
  24. address: 'Tencent'
  25. }, {
  26. id: 5,
  27. name: 'tim',
  28. age: 12,
  29. address: 'Tencent'
  30. }]
  31. table.columns = [{
  32. title: 'Name',
  33. key: 'name',
  34. }, {
  35. title: 'Age',
  36. key: 'age',
  37. }, {
  38. title: 'Address',
  39. key: 'address',
  40. }, {
  41. title: '操作',
  42. render: (item) => (
  43. Omi.html`<span>
  44. <a href="javascript:;" onClick=${e => {
  45. table.dataSource.splice(table.dataSource.indexOf(item), 1)
  46. table.update()
  47. }}>Delete</a>
  48. </span>`
  49. )
  50. }]
  51. table.update()
  52. </script>

Omi 中使用

  1. <m-table
  2. checkbox
  3. dataSource={this.dataSource}
  4. columns={this.columns}>
  5. </m-table>

API

Props

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