table

<script>
  import { Table } from 'svelma-pro'
  let thead = ['ID', '名称', '日期', '负责人', '描述']
  let tbody = [
    {id: 1, name: 'xxx', date: '2017/10/01 - 2019/11/30', admin: 'xxx', desc: 'xxx'},
    {id: 2, name: 'xxx', date: '2020/03/19 - 2020/10/15', admin: 'xxx', desc: 'xxx'},
    {id: 3, name: 'xxx', date: '2019/07/15 - 2020/01/15', admin: 'xxx', desc: 'xxx'},
  ]
</script>
<Table 
  types="is-bordered is-striped is-hoverable is-fullwidth"
  thead={thead}
  tbody={tbody}>
</Table>

<script>
  import { Table, Datepicker } from 'svelma-pro'
  let thead = ['ID', '名称', '日期', '负责人', '描述']
  let tbody = [
    {id: 1, name: 'xxx', date: '2017/10/01 - 2019/11/30', admin: 'xxx', desc: 'xxx'},
    {id: 2, name: 'xxx', date: '2020/03/19 - 2020/10/15', admin: 'xxx', desc: 'xxx'},
    {id: 3, name: 'xxx', date: '2019/07/15 - 2020/01/15', admin: 'xxx', desc: 'xxx'},
  ]
</script>
<!-- 自定义表格的表格基础样式都属于自定义范畴 -->
<Table 
  types="is-bordered is-striped is-hoverable is-fullwidth" 
  custom thead={thead} tbody={tbody}>
  <!-- head插槽会返回相应渲染值：head -->
  <th slot="head" let:head>
    {#if head == '负责人'}
      <span style="color: red">{head}</span>
    {:else}
      <span>{head}</span>
    {/if}
  </th>
  <!-- body插槽会返回相应行的对象和索引:row、index, 以及每列对应的key -->
  <td slot="body" let:row let:key let:index>
    {#if key == 'admin'}
      <span style="color: red">{row[key]}</span>
    {:else if key == 'date'}
      <Datepicker/>
    {:else}
      <span>{row[key]}</span>
    {/if}
  </td>
</Table>

<script>
  import { Table } from 'svelma-pro'
  let thead = ['ID', '名称', '日期', '负责人', '描述']
  let tbody = [
    {id: 1, name: 'xxx', date: '2017/10/01 - 2019/11/30', admin: 'xxx', desc: 'xxx'},
    {id: 2, name: 'xxx', date: '2020/03/19 - 2020/10/15', admin: 'xxx', desc: 'xxx'},
    {id: 3, name: 'xxx', date: '2019/07/15 - 2020/01/15', admin: 'xxx', desc: 'xxx'},
  ]
  function getChecked(res) {
    console.log(res.detail)
  }
</script>
<Table 
  types="is-bordered is-striped is-hoverable is-fullwidth"
  thead={thead}
  tbody={tbody}
  checkbox
  on:checked={(res) => getChecked(res)}>
</Table>

<script>
  import { Table } from 'svelma-pro'

  let thead = ['address', 'wkb_geometry', 'ogc_fid', 'name', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone', 'phone'];
  let tbody = [
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"},
    {"address":"云桥路875号","wkb_geometry":"{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}","ogc_fid":1,"name":"东区支行", "phone": "13627220747", "phone1": "13627220747", "phone2": "13627220747", "phone3": "13627220747", "phone4": "13627220747", "phone5": "13627220747", "phone6": "13627220747", "phone7": "13627220747", "phone8": "13627220747", "phone9": "13627220747", "phone10": "13627220747", "phone11": "13627220747", "phone12": "13627220747"}
  ];
  function getChecked(res) {
    console.log(res.detail)
  }
</script>
<!-- 自定义表格固定表头在下拉时不起作用 -->
<Table 
  types="is-bordered is-striped is-hoverable is-fullwidth"
  thead={thead}
  tbody={tbody}
  checkbox
  bodyHeight="400px"
  on:checked={(res) => getChecked(res)}>
</Table>