github
/
svelma-pro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
svelma-pro/components/table/index.html

92 lines
52 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet><link href=client/chunk.94a6e723.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="table | Svelma" property=og:title><meta content=表格 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>table</h1> <h2 class=subtitle>表格</h2></header> <p class="title is-4">基础表格</p> <div class="svelte-150a96u horizontal snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden name=parameters value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2Fg5kkGq1XHMAHJjSNUOEeFqh3FYErmJlUJgHeYANpDgCSABEhzJh4BYFUAD5474eAU9NAPjmx6HgHxYwDEsYAuuUvgHnjQAP8UOALoz7LmZiR5crhnAN4AYUruoQrAGQ74FBx6YAIMAQXcAAMFIAOxlBSiFlMh5jhOYSEUgAnOhVKkohx6LrM6AQVB-AwfAxDUdBsgAUBeGgag4HDjRMFwQhiFIVhpLoQROF4fxmEYehRLkZglGMbRu5plW8lDsxpyAZgAakuxnGQdBim8cO-FEYhaEUkSolIQJyFSTJclcfpgb0SpamWB-6BclWNZ1nynbdjAOqOL8cDJBAcDhHgQRpokS5heEbzeasjbhcouBiEEXY9nFYDDFAyLePOOzzrivjAMVi6SN6kY-GVkaSHyZR-bADh5iAPCoMQrioH6NB0OgpbaDKyAgGBJa6KOozhEoHF8CWcjpXAED0LoFKEIha0gHIaYiJuMCFIo6DEBA8AcN0XDhEEXThFsQgAHoACyUoQRKbSAWpQFAHQ8Hdq0YZSr3vZ9PATp9FAKJE6JcGQEq6LdBFkoQ90A7gH1fSDHRg-g4ToDyMAXWiUBiHdj13GSyOo8DfAY-Do6CLDJLraS5NA-jmPhMEsJBMTa2I69i1BCIkQuHdjP_SKab7Wmh3HQgw202NID8Kwbx80WoxCEr8AynIAACCKKiiaIrGUCIsIbdArOEmpZBrcEq3IQxjrbysyiKXm1swsugEM0CYEIgNfThxCvRmzC4D7UB-7oAfqpEOHIq923-1d6pvKgiqINttodGHEd-3IaeKkI_MiOYPAdN2EDBwXPrMJnMAiMXEAC2XFcuMQOHhEn0g90AA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class="svelte-k9dgfy smx-table-all"><div class="svelte-k9dgfy smx-table-head"><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table" style=margin-bottom:0><thead><tr> <th class=svelte-k9dgfy><span class=svelte-k9dgfy>ID</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>名称</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>日期</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>负责人</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>描述</span></thead></table></div> <div class="svelte-k9dgfy smx-table-flow-x" style=height:100%><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table"><tr> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2017/10/01 - 2019/11/30"><span class=svelte-k9dgfy>2017/10/01 - 2019/11/30</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> <tr> <td class=svelte-k9dgfy title=2><span class=svelte-k9dgfy>2</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2020/03/19 - 2020/10/15"><span class=svelte-k9dgfy>2020/03/19 - 2020/10/15</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> <tr> <td class=svelte-k9dgfy title=3><span class=svelte-k9dgfy>3</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2019/07/15 - 2020/01/15"><span class=svelte-k9dgfy>2019/07/15 - 2020/01/15</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> </table></div> </div> </div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code>&lt;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'},
]
&lt;/script>
&lt;Table
types="is-bordered is-striped is-hoverable is-fullwidth"
thead={thead}
tbody={tbody}>
&lt;/Table></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">自定义表格</p> <div class="svelte-150a96u horizontal snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden name=parameters value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2FgMnMABEBDAeBBiK4ruZJBqtVxzAByY0jVDhHha2dxWBK5iZVCYB3mADas4Akn3Z73Z4BYFUAD55nueAU9NAPjmt9ngHxYwDEsYAuuWfgHnjQAP8bOAF112ycxmEjPd9wZYBvADCle1CFYA1nfAUNvTBByQu4AAYKQAdjKCksLKHDzHCcxsIpABOAiqVJLDbx3WZ0CQlD8DQ-BiBY1DZCgmDyPg1BELnVi0IwudsOw4jSQIyjSPIrDJMIgiiQYzAmK4tjezTKsNNnHjTmgzAA1JAShOQ1CtLE2cKOorD8IpIk5IkoicOU1T1OEizAw43T9MsID0C5KsazrPkAEJwjIwArwMALO1AEk5QALCMAHgtABC3ZLAC_1QABD0AdgtAHh9QBfhMAPR1ADi5WK4sAYGDABdXUjwj5TtuxgHVHF-OBkggOBwjwII00SXd2vCN4QtWRsOuUXAxCCLtYBG8IwGGKBkW8Ld_CaywQzebUt1xXxgC2ndJzAnlbB8XbI0kBs9Aisjt0wQAl40AX8tACx5QAV-MAPbVAA-3QAUvUAJjtAGXzQAeBUALH-bpqi6t3MOAoFwZhGm2laN0QG6G0sYAAGIIDAcwQZ8R1X0_PSGUsSseAwCH3j-EBSChoIA16_wjGAG7JCCkn0GR1tEHEWFJEJqw4FZhmmZZjB2eAMoMZ5xwuS3C6rvMSMHpej7PsAGQiUsAT-1AEMYwAYlUAIl9AFR9RAtWRQBABgUNN8F7QBTuUAKeVAHnrQB0JXVz6UrHWxQc5Zhd0h6HkkjeH_WN8wEbd4P_XNpRRfRzHQ5xudGIUAnTiJ_nSbeNIKaphVadWengGN_c3YA5mylTtmoM5qBYUbGOYHduPZ3Q1gk6WPQB1YYdRyuDkDMr7neeJkX89wZFC7r4vhfLgzxbASWibKL2-TKerYAcPMQBJ0dUD9Gg6HQUttBlZAQAQktdAXUZwiUQS-BLOQJrgCB6F0ClCCwt-QDkNMRD7Ic2DTdAxAIDwA4N0Lg4QghdHCFsIQAA9AALJSQgRJP4gC1FAKAHQeBwNfoRSkqD0GYJ4MuTBFAFCRHRFwMgEpdCwMomSQg8CCG4AwVgkhHQyHoHCOgHkMAIFoigGIOBiC7hkmYaw4hfAOHkIXIIWhJJ36knEUQ9hnDwjBFhEEYRb9GGoMfkEEQkQXBwMUfgkUaZCiKEAcAhAx9ZFnxAPwVgbw9FFlGEIJx8AZRyAAAIIkVCiNEKwygIhYIEugKxZqJAcZ4lxcghiLg8YOFxIpgq1mYLY0AQxoCYCEIQrBpFiCoIzMwXA2SoC5N0Pk9UkRSLIlQd_PJUD1RvFQIqRA39bQdFKeU3JchWmKiEPokQ5geAdG7COPRPpmAdJgCIIZEADGjPGS4YgNVGnSE2UAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class=svelte-k9dgfy style=height:100%><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table"><thead><tr> <th slot=head><span>ID</span><th slot=head><span>名称</span><th slot=head><span>日期</span><th slot=head><span style=color:red>负责人</span><th slot=head><span>描述</span></thead> <tr> <td slot=body><span>1</span><td slot=body><span>xxx</span><td slot=body> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input id=1617093985815 readonly iconpack=fa icon=calendar value=2021-3-30 class="svelte-nhop5 input"> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div><td slot=body><span style=color:red>xxx</span><td slot=body><span>xxx</span></td> <tr> <td slot=body><span>2</span><td slot=body><span>xxx</span><td slot=body> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input id=1617093985815 readonly iconpack=fa icon=calendar value=2021-3-30 class="svelte-nhop5 input"> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div><td slot=body><span style=color:red>xxx</span><td slot=body><span>xxx</span></td> <tr> <td slot=body><span>3</span><td slot=body><span>xxx</span><td slot=body> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input id=1617093985815 readonly iconpack=fa icon=calendar value=2021-3-30 class="svelte-nhop5 input"> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div><td slot=body><span style=color:red>xxx</span><td slot=body><span>xxx</span></td> </table></div> </div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code>&lt;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'},
]
&lt;/script>
&lt;!-- 自定义表格的表格基础样式都属于自定义范畴 -->
&lt;Table
types="is-bordered is-striped is-hoverable is-fullwidth"
custom thead={thead} tbody={tbody}>
&lt;!-- head插槽会返回相应渲染值：head -->
&lt;th slot="head" let:head>
{#if head == '负责人'}
&lt;span style="color: red">{head}&lt;/span>
{:else}
&lt;span>{head}&lt;/span>
{/if}
&lt;/th>
&lt;!-- body插槽会返回相应行的对象和索引:row、index, 以及每列对应的key -->
&lt;td slot="body" let:row let:key let:index>
{#if key == 'admin'}
&lt;span style="color: red">{row[key]}&lt;/span>
{:else if key == 'date'}
&lt;Datepicker/>
{:else}
&lt;span>{row[key]}&lt;/span>
{/if}
&lt;/td>
&lt;/Table></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">添加选择框</p> <div class="svelte-150a96u horizontal snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden name=parameters value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2Fg5kkGq1XHMAHJjSNUOEeFqh3FYErmJlUJgHeYANpDgCSABEhzJh4BYFUAD5474eAU9NAPjmx6HgHxYwDEsYAuuUvgHnjQAP8UOALoz7LmZiR5crhnAN4AYUruoQrAGQ74FBx6YAIMAQXcAAMFIAOxlBSiFlMh5jhOYSEUgAnOhVKkohx6LrM6AQVB-AwfAxDUdBsgAUBeGgag4HDjRMFwQhiFIVhpLoQROF4fxmEYehRLkZglGMbRu5plW8lDsxpyAZgAakuxnGQdBim8cO-FEYhaEUkSolIQJyFSTJclcfpgb0SpamWB-jhgF0xDMBAZDmH6zAAMKZMQrirO6iRwDGrYMtauCwIQUC4BQEXwIQaZItAMZxJIZhclWNZ1nynbdjAOqOL8cDJBAcDhHgQRpokS41eEbyFasja1couBiEEXY9i1nlQFAyLePOOzzrivjAJNi65RVkY-DNkbzZYxAha4eD4HEZCIOtMChasS2pVFDpGP52TBQdYWYCdMaSHyZQlbADh5iAPCoKFqB-jQdDoKW2gysgIBgSWuijqM4RKBxfAlnIvVwL5_26BShCIWjIByGmIibjAhSKOgxAQPAHDdFw4RBF04RbEIAB6AAslKEESmMgFqw0dDwdOoxhlKs-zUCcxOgsUAokTolwZASrotMEWShD0_z8WCzwwsdKL6DhOgPIwBTaJQGIdOM3cZJKxzqt8OrYujoIMskujpJmyrasa-EwSwkERtowrrOI0EIiRC4dMO3zIppvjaaE8TCDAzbYMgPwrBvL7RajEIifwDKcgAAIIoqKJoisZQIiwBd0Cs4Salk6dwcnchDGONdJzKIoFbWzAx6AQzQJgQgC5zOHEKzGbMLg3dQL3uj9-qkQ4cirPY33VPqm8qCKog2O2h0o_j73cir4qQh-yI5g8B03YQEP-8-swG8wCIR8QP7p_ny4xA4eEi_SN_QA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview><div class="svelte-k9dgfy smx-table-all"><div class="svelte-k9dgfy smx-table-head"><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table" style=margin-bottom:0><thead><tr><th class=svelte-k9dgfy><input type=checkbox></th> <th class=svelte-k9dgfy><span class=svelte-k9dgfy>ID</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>名称</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>日期</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>负责人</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>描述</span></thead></table></div> <div class="svelte-k9dgfy smx-table-flow-x" style=height:100%><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table"><tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2017/10/01 - 2019/11/30"><span class=svelte-k9dgfy>2017/10/01 - 2019/11/30</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=2><span class=svelte-k9dgfy>2</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2020/03/19 - 2020/10/15"><span class=svelte-k9dgfy>2020/03/19 - 2020/10/15</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=3><span class=svelte-k9dgfy>3</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title="2019/07/15 - 2020/01/15"><span class=svelte-k9dgfy>2019/07/15 - 2020/01/15</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> <td class=svelte-k9dgfy title=xxx><span class=svelte-k9dgfy>xxx</span> </td> </table></div> </div> </div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code>&lt;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)
}
&lt;/script>
&lt;Table
types="is-bordered is-striped is-hoverable is-fullwidth"
thead={thead}
tbody={tbody}
checkbox
on:checked={(res) => getChecked(res)}>
&lt;/Table></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">固定表头</p> <div class="svelte-150a96u horizontal snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden name=parameters value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAFVQ2Fg5kkGq1XHMAHJjSNUOEeFqh5bHLAlcxMqhMA7zABtIdLzCJaJDmTD5GubAAfT96OyQVsu-HuAoxCPkEwV6HoRWT54yjIMDfH-d38_f9_Pch3ff8gJAwDh3Ar8wJ_aDINggC4OAhCYNA-D_wAXXjSw53MZhIxXVcGS9EBN23KpEH8QBEuUAUwtAHvYgAOAB2IlAHflfwZH8A9j1PFZmAvfxKJAEjfkE_wAAVcAUHIQE4kBSAVNZQlYCjVwpO4KUIAA2CkmK0gAGLSdKY0kmJkUlNLuAAWABOLSrNJIkGNsikiSJDDJA4_wbzvB9BIpOSXxgMSQEAHDlAC5lQB6U0AGQiOJ1EAoME-KKVJLS7iYu47n0pirKYuL_Cgikkv8FK0oyrKcry2T4qgh4kGS1L0sy7LcvyhLYNJYqQFKpqKta6qCtgqyup68qWqqvdBs_IkRsasbKraqCtNmsrmoWgb2s_KqAxKua1v6ybNudBiVt68bFtgmzTvmg6atgil9Ou_aJruz8KSK-rdtWvqXqm511Ken7_FkYjWUwLd4Ao6j6OYtivJAbiTxgM9-KjJB_BE2xChCyTpPhhSgiUgR4EEtSNO03SDKM3TTPMyzbPsxznJs1z3M82TvNve9vH8wLUBWEKIpii7P0B86NsKsX1sO2qpduv6YE6z7ur2oGJaGuXfqOmAZuV0bnpF51lr11XxZl2Dtoa76zde47NcNmArpN63pdtmAHvt9W3o-naVZd-XtYB52zvWkHThIsjIZC2jGJY9iOYRw8kZRgT0eE_4seCtPcZYfHcEUhRidU9TNOMqnjNpizCGsuyHKcly3I8-GfO5zBef8ILBai2KvedT3zbe_u3bq339bVgfnSV0fTddhXhuDm6tag3Xp_9pfYON1eQ4DqDLa-7f18_E6F4N3vHaHhWPZP8e3fei_A5Hq2D-Bzjw7BiGFjTmPYfjuTEd488aMhKY2xtnKSucE4EyJipUmJcKZ6UMhXMyVca6M3rizRu7M5Itz8kgAKHd-ZZyEkLHuE8iFP0Xg7H2FDT5kMfvvShZ8p40JvnPe-y92Eb04Vtbhdtr42wVk7LejCyFX2EbQ2-1CGESMvvQv2z88yg1IuDci0cYZx3hv_ZGfFU7AIzqAoSOcZJySgYXGBSAyal0pogmmyD6a1yZg3Nmzcua4MQPgkAnc04kIdrw92fi5FjwEdrZh0jWHa3nuI8JHD-Gz21pvFhwTd5-OPlEpJl0_FiMSXEwqUj5EiNvoEme_Uw6eAjioqOX91FwwTlolOQCMb6KIRJcBxj_CmOUiTCxcCy42JMnY6uDM67M1Zk3BOOCeZ4L5gLbx3dfGxJ3vdAJfjQn5JkREvxK9smLM_AksJ6SeELMPnwtJOSMlHKoY9C5Z877XNEUUteL8lGR0_kJb-GjalJwAajEKIDmkgCMXnAunTi7k16dTfpdNBkOPQaMrBnNfKTPcdM_5Piz6ZOWXct2qyglnM_JE7ZxydZ-L2Ws6JFsUl-KEYSy5mS8m4p2f9B5CjSlOHKR_KGIB3k1L_l87RgDflNJxq0oFhMzFdMQJY-B5dbFQtQcMpxYzsGuKRR4rxxC5noqxZfTFpzGWKz8QS_ZeLnRbONfq0lDKiV7zJQck5NKz7UvNUSrJzqqH0uKS65ljDWWWHZaoqpsceVcT5fUwVnBM7CrxpA_OYqQWwLBdYiFld7FoJGZglxiK25TIITMjVwstV6pdbqh1ZCcWeodka21JriXaviX4m1VqHapNLW7J11b9Wuo7S6j1jybnetPr61s78A1vOqb_ENPF-U_LTn8qNECTGxugRKqV4KkFyqGY4jBzjxkquzci3NqLNVkIxXW2WZ6OqGs2SShtlKL2fnbU2m5Vyi3usyQOtWQ7_WVLHUGidicp1htnUKsB0bF3AqLgmqxCDk0DPlVuuFmbW7t08YQruBaT33v-iWt1TCr1Ydra-s-lqK1n0baRshLbcNkMfRR2-L7W2X17Qo-5ntPKOCwnEMAXRiDMAgGQcwfpmAAGFMjEFcKsd024YzDtONaXAsBCBQBvFJ-AhA0xImgDGOI7GuRVhrHWPkABCcI4RzCACvAwAWdqAEk5QAFhGAB4LQAX2qWds4AFk1AAU6oAaDlACTRoAN9NACwcoAd1jAA68oACldzCmb5J2bsMAdSOF-HAZIEA4DhDwITK4qxGwpbeAZzLyXwgfjEEELsPZ8vcagFAZE3gFw7AXLiXwwA6tLnY5YfCPJbA-Ea5GFr5hiBicPAQOIkYAASMAIAUFUMkKy-l9I8HwDsMgiA-swHE6sTrqm4AyZ8EYQT2RRMrYk5gDbMZJB8jKNF2ADg8wJVQOJ1AfoaB0HQKWbQMpkCoZWEIUcoxwhKH5nwEscgitwH4893Qml9KEH0rJEAaYRAABEYCFEUOgYgEB4AcG6FwcIQQujhC2EIAAelZSkhAiQw61BVjoPAieaQepSCnCmoDU4nMzigChIjoi4GQCUuhCc2TJIQKyjOqc8FZx0dn6BwjoB5DAHHaIoBiCJyTu4ZIRfM7F3wCXHPRyCD5ySSHpJ1cs615L8IwRYRBGV1DoXMOQdBBEJEFwRPDcM5FGmZHaZUfo4QO93XJZdD8BUjKOQ33UBCCD_AEPIAAACCJFQojRCsMoCIWCJ7oCscImosgR6LtHoYY5c_B-u_p2szBfegCGNATAQhKca4i8QGHGZmC4Cr1AGvug6_U4bxF5EMO4e17x-qN4qBFSIDh7aDoLe2819Dz6N7wgIAO_MDwDo3YICN7n6P5g4-YAiC-0vkQK-18uGIBF8IA_pBX6AA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview> <div class="svelte-k9dgfy smx-table-all"><div class="svelte-k9dgfy smx-table-head"><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table" style=margin-bottom:0><thead><tr><th class=svelte-k9dgfy><input type=checkbox></th> <th class=svelte-k9dgfy><span class=svelte-k9dgfy>address</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>wkb_geometry</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>ogc_fid</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>name</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span><th class=svelte-k9dgfy><span class=svelte-k9dgfy>phone</span></thead></table></div> <div class="svelte-k9dgfy smx-table-body" style=height:400px><table class="svelte-k9dgfy is-bordered is-fullwidth is-hoverable is-striped table"><tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> <tr><td class=svelte-k9dgfy><input type=checkbox> </td> <td class=svelte-k9dgfy title=云桥路875号><span class=svelte-k9dgfy>云桥路875号</span> <td class=svelte-k9dgfy title='{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}'><span class=svelte-k9dgfy>{"type":"Point","coordinates":[121.61760661737,31.2496435849155]}</span> <td class=svelte-k9dgfy title=1><span class=svelte-k9dgfy>1</span> <td class=svelte-k9dgfy title=东区支行><span class=svelte-k9dgfy>东区支行</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> <td class=svelte-k9dgfy title=13627220747><span class=svelte-k9dgfy>13627220747</span> </td> </table></div> </div> </div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code>&lt;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)
}
&lt;/script>
&lt;!-- 自定义表格固定表头在下拉时不起作用 -->
&lt;Table
types="is-bordered is-striped is-hoverable is-fullwidth"
thead={thead}
tbody={tbody}
checkbox
bodyHeight="400px"
on:checked={(res) => getChecked(res)}>
&lt;/Table></code></pre></figure></div> </div></div> <hr class=is-medium> <section><h2 class="title is-4">API</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>thead</code></td> <td>表格head渲染数据</td> <td>Array</td> <td><code><code>[]</code></code></td> <td><code>[]</code></td> <tr><td><code>tbody</code></td> <td>表格body渲染数据</td> <td>Array</td> <td><code><code>[]</code></code></td> <td><code>[]</code></td> <tr><td><code>types</code></td> <td>表格样式</td> <td>String</td> <td><code>is-bordered</code>, <code>is-striped</code>, <code>is-hoverable</code>, <code>is-fullwidth</code></td> <td>—</td> <tr><td><code>custom</code></td> <td>是否自定义表格</td> <td>Boolean</td> <td><code>false</code>, <code>true</code></td> <td><code>false</code></td> <tr><td><code>checkbox</code></td> <td>是否显示选择框</td> <td>Boolean</td> <td><code>false</code>, <code>true</code></td> <td><code>false</code></td> <tr><td><code>bodyHeight</code></td> <td>设置表格body高度</td> <td>String</td> <td><code>px</code></td> <td><code>100%</code></td> </table></div></section> <hr class=is-medium> <section><h2 class="title is-4">EVENT</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Parameters</th> <th>Description</thead> <tr><td><code>checked</code></td> <td>—</td> <td>选择事件</td> </table></div></section></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d,e,f,g){return {jsdoc:[{description:"表格head渲染数据",type:[a],defaultvalue:b,name:"thead",values:c},{description:"表格body渲染数据",type:[a],defaultvalue:b,name:"tbody",values:c},{description:"表格样式",type:[d],name:"types",values:"\u003Ccode\u003Eis-bordered\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-striped\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-hoverable\u003C\u002Fcode\u003E, \u003Ccode\u003Eis-fullwidth\u003C\u002Fcode\u003E"},{description:"是否自定义表格",type:[e],name:"custom",defaultvalue:f,values:g},{description:"是否显示选择框",type:[e],name:"checkbox",defaultvalue:f,values:g},{description:"设置表格body高度",type:[d],name:"bodyHeight",defaultvalue:"100%",values:"\u003Ccode\u003Epx\u003C\u002Fcode\u003E"},{isEvent:true,description:"选择事件",name:"checked",values:""}]}}("Array","[]","\u003Ccode\u003E\u003Ccode\u003E[]\u003C\u002Fcode\u003E\u003C\u002Fcode\u003E","String","Boolean",false,"\u003Ccode\u003Efalse\u003C\u002Fcode\u003E, \u003Ccode\u003Etrue\u003C\u002Fcode\u003E"))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script>
Reference in New Issue View Git Blame Copy Permalink