206 lines
32 KiB
HTML
206 lines
32 KiB
HTML
<!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/stable.207832c2.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="stable | 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>stable</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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAZSR2Fg5kkGq1XHMAHJjSNUOEeFqh3FYErSFBQ3AHeYANpxYCuGC2AP-bz-GTMCDMWA7kAASQAIv5ZOvN9udSBQit94fjzBT4BYFUAD57XmS3renpgAgwC-R4ng-gBvpoAL6m_v-96spgswJiAB5ge-D6AMLmgAKabBjgbgBD5plWoFvqegDzxoAD_HXgAuvGlizoGAioMua54d4AYUjIT7oUOypDjIQGsAGQ53AADBSADsZQUqJZTifxqCIQownyQJ8DEMJgCIRoA9GbyTebGYAGdxcagKzCQAQvxgk8WJYlyaS0kAJwKUp6AqXcVnqVpukefpljAOx5ikiZZnDgAwlZwHCWJFKOXJUkUkSLlISppKeVW3miWlfnmLRnJlFWNZ1g2eidqg3YwOY86hugcA-MA1VcHAfZasidXAIJqCSEYXJlRVDZ5iAPCoMQrioH6NB0OgpbaDKyCPqZJa6KOozhEopl8CWchiEEcAQPQugUoQonHShIBpiIF4wIUijoMQEDwBw3RcOEQRdOEWxCAAegALJShBEmdWpQAuPDfUdMmUkDuAgx0PATguFAKJE6JcGQEq6F9jlkoQP3Q7D8N8B0SPoOE6A8jAr1olAYjfX9dxkvjoMI8TyOjoImMkidpJM3DLMk-EwSwkEdPHbjZ17UEIiRC433c1DIppjdaZ3Q9CDzezS0gPwrBvBLRajEIOvwDKcgAAIIoqKJoisZQIiw1t0Cs4SalkRvAXrchDGO7u6zKIqFbWzDq6AQzQJgQjA6D5iRGdGbMLgYdQBHuhR3DMfEDHyJnRdkfveqbyoIqiAXbaHQJ0nEdyIXipCJLIjmDwHTdhAxASz6zAlzAIh1xAUuN83LiZ-E4S59I49AA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview style=height:200px><div class=svelte-zfi5s3 id=smx-stable><table class="svelte-zfi5s3 fixedHeader is-bordered is-fullwidth is-hoverable is-striped stable table" style=min-width:100%;height:100%><thead class=svelte-zfi5s3 style="width:calc(100% - 0px)"> <tr class=svelte-zfi5s3> <th class=svelte-zfi5s3 style=text-align:center title=ID>ID <th class=svelte-zfi5s3 style=text-align:center title=名称>名称 <th class=svelte-zfi5s3 style=text-align:center title=时间>时间 <th class=svelte-zfi5s3 style=text-align:center title=权限>权限 <th class=svelte-zfi5s3 style=text-align:center title=描述>描述 </thead> <tbody class=svelte-zfi5s3 style="height:calc(100% - 0px)"><tr class=svelte-zfi5s3> <td class=svelte-zfi5s3 style=text-align:center title=1>1 <td class=svelte-zfi5s3 style=text-align:center title=A>A <td class=svelte-zfi5s3 style=text-align:center title=2017/10/01>2017/10/01 <td class=svelte-zfi5s3 style=text-align:center title=01>01 <td class=svelte-zfi5s3 style=text-align:center title=我是01>我是01 </td> <tr class=svelte-zfi5s3> <td class=svelte-zfi5s3 style=text-align:center title=2>2 <td class=svelte-zfi5s3 style=text-align:center title=B>B <td class=svelte-zfi5s3 style=text-align:center title=2020/03/19>2020/03/19 <td class=svelte-zfi5s3 style=text-align:center title=02>02 <td class=svelte-zfi5s3 style=text-align:center title=我是02>我是02 </td> <tr class=svelte-zfi5s3> <td class=svelte-zfi5s3 style=text-align:center title=3>3 <td class=svelte-zfi5s3 style=text-align:center title=C>C <td class=svelte-zfi5s3 style=text-align:center title=2019/07/15>2019/07/15 <td class=svelte-zfi5s3 style=text-align:center title=03>03 <td class=svelte-zfi5s3 style=text-align:center title=我是03>我是03 </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><script>
|
||
import { Stable } from 'svelma-pro'
|
||
let colums = [
|
||
{key: "id",title: "ID"},
|
||
{key: "name",title: "名称"},
|
||
{key: "date",title: "时间"},
|
||
{key: "admin",title: "权限"},
|
||
{key: "desc",title: "描述"}];
|
||
let data = [
|
||
{id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},
|
||
{id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},
|
||
{id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},
|
||
];
|
||
</script>
|
||
<Stable columns={colums} rows={data}></Stable></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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAZSR2Fg5kkGq1XHMAHJjSNUOEeFqh3FYErSFBQ3AHeYANpxYCuGC2AP-bz-GTMCDMWA7kAASQAIv5ZOvN9udSBQit94fjzBT4BYFUAD57XmS3renpgAgwC-R4ng-gBvpoAL6m_v-96spgswJiAB5ge-D6AMLmgAKabBjgbgBD5plWoFvqegDzxoAD_HXgAuvGlizoGAioMua54d4AYUjIT7oUOypDjIQGsAGQ53AADBSADsZQUqJZTifxqCIQownyQJ8DEMJgCIRoA9GbyTebGYAGdxcagKzCQAQvxgk8WJYlyaS0kAJwKUp6AqXcVnqVpukefpljAOx5ikiZZnDgAwlZwHCWJFKOXJUkUkSLlISppKeVW3miWlfnmLRnJlFWNZ1g2eidqg3YwOY86hugcA-MA1VcHAfZasidXAIJqB9sQmTEK4eD4PVzBBB0MB9ngQRpokvjAMNo19qEQStUNI1jUYXJlRVDZ5iAPCoH1qB-jQdDoKW2gysgj6mSWuijqM4RKKZfAlnIYhBHAED0LoFKEKJv0oSAaYiBeMCFIo6DEBA8AcN0XDhCN6DhFsQgAHoACyUoQRIA1qUALjwqM_TJlI47geMdDwE4LhQCiROiXBkBKugo45ZKEGjpPk5TfAdDTiPoDyMDw2iUBiKjGN3GSnP41TvO06OgjMySf2ktLFOy3z4TBLCQTi797MAx9QQiJELioyrJMimmYNphDUMIJdCs3SA_CsG8htFqMQiu_AMpyAAAgiioomiKxlAiLAh3QKzhJqWTe8B7tyEMY4J27MoioVtbMA7oBDNAmBCLj-PmJEAMZswuD51Ahe6MXFOl8QpfIgDQNF10E7mG8qCKogQO2h0lfV4Xcjd4qQhGyI5g8B03YQMQhs-swfcwCIE8QMb0-zy4TfhOEbfSIfQA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview style=height:200px><div class=svelte-zfi5s3 id=smx-stable><table class="svelte-zfi5s3 fixedHeader is-bordered is-fullwidth is-hoverable is-striped stable table is-narrow" style=min-width:100%;height:100%><thead class=svelte-zfi5s3 style="width:calc(100% - 0px)"> <tr class=svelte-zfi5s3><th class=svelte-zfi5s3 style=text-align:center;width:50px><input type=checkbox style=vertical-align:middle></th> <th class=svelte-zfi5s3 style=text-align:center title=ID>ID <th class=svelte-zfi5s3 style=text-align:center title=名称>名称 <th class=svelte-zfi5s3 style=text-align:center title=时间>时间 <th class=svelte-zfi5s3 style=text-align:center title=权限>权限 <th class=svelte-zfi5s3 style=text-align:center title=描述>描述 </thead> <tbody class=svelte-zfi5s3 style="height:calc(100% - 0px)"><tr class=svelte-zfi5s3><td class=svelte-zfi5s3 style=text-align:center;width:50px><input type=checkbox style=vertical-align:middle> </td> <td class=svelte-zfi5s3 style=text-align:center title=1>1 <td class=svelte-zfi5s3 style=text-align:center title=A>A <td class=svelte-zfi5s3 style=text-align:center title=2017/10/01>2017/10/01 <td class=svelte-zfi5s3 style=text-align:center title=01>01 <td class=svelte-zfi5s3 style=text-align:center title=我是01>我是01 </td> <tr class=svelte-zfi5s3><td class=svelte-zfi5s3 style=text-align:center;width:50px><input type=checkbox style=vertical-align:middle> </td> <td class=svelte-zfi5s3 style=text-align:center title=2>2 <td class=svelte-zfi5s3 style=text-align:center title=B>B <td class=svelte-zfi5s3 style=text-align:center title=2020/03/19>2020/03/19 <td class=svelte-zfi5s3 style=text-align:center title=02>02 <td class=svelte-zfi5s3 style=text-align:center title=我是02>我是02 </td> <tr class=svelte-zfi5s3><td class=svelte-zfi5s3 style=text-align:center;width:50px><input type=checkbox style=vertical-align:middle> </td> <td class=svelte-zfi5s3 style=text-align:center title=3>3 <td class=svelte-zfi5s3 style=text-align:center title=C>C <td class=svelte-zfi5s3 style=text-align:center title=2019/07/15>2019/07/15 <td class=svelte-zfi5s3 style=text-align:center title=03>03 <td class=svelte-zfi5s3 style=text-align:center title=我是03>我是03 </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><script>
|
||
import { Stable } from 'svelma-pro'
|
||
let colums = [
|
||
{key: "id",title: "ID"},
|
||
{key: "name",title: "名称"},
|
||
{key: "date",title: "时间"},
|
||
{key: "admin",title: "权限"},
|
||
{key: "desc",title: "描述"}];
|
||
let data = [
|
||
{id: 1,name: 'A',date: '2017/10/01',admin: '01',desc: '我是01'},
|
||
{id: 2,name: 'B',date: '2020/03/19',admin: '02',desc: '我是02'},
|
||
{id: 3,name: 'C',date: '2019/07/15',admin: '03',desc: '我是03'},
|
||
];
|
||
</script>
|
||
<Stable columns={colums} rows={data} checkbox={true} bordered={true} narrow={true}></Stable></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-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAZSR2Fg5kkGq1XHMAHJjSNUOEeFqh3EmynWwAhDrMZhkPua7X-UejCda82WxywJV0RXz2wOnXgCBBN4AfVCKz3B-y5mPzAA8kE00FzxT43FrUqpBQKGcB3OeADaXqnJYrgwLYAb-N4_gyAyljMBAzCwAhIAAJIACLIahL4pqg3YwAGzBBB0MAoacsgMlBSywfBF6QNezB3qgD4gLRSzoZh5EXgAYjhABK7YACrmAAcsqACyACihHQcRiqkVh5iUdRvFOPRpyMfEzHYfwt73jAyl8RhGn-AAMsqkkyfJSk8URr7qYJWk0UR_TJs6LAUVR5l0TplgGZ4RkXjAozQBZ8T8dZIAKXJyo4TZsWeG5ZEBdRDJ6Z4YVOBF_h-ooQTpT8VmCf4ADiCnSXhCmieVliZRpnkhb2HUFTBcHYbWN6oJgmCJAsLkqfFVW4QACiqeF4aJCntu2zWqV2bWBR1eXmAAun-jgAYGAioGBjqQUR3gBncpIACwdZYbGmVxk0UitJkcWZ2FXddK0lV-2FyWEFLmWNSz9YNw3wK0F4UgAnHclIAGwAByECtUWoNAn03eVW2hedmCXTdd0alej0rJ9r14u9T1Y99IPxL9Vz_WEwPE2DQ0jVD_iw_DFLI6j9OeOjmMXl9OM6bt-73V0xDoWQL4dNgszMO6IgxgVLOKu6Q6AMr6gCySoAMhGAFxyQ4ANQiIQ3hxnEkhSwcnbueYQGhugcA-MAztcKBfZasibvAJgR13H22AKATr6nuYodYIgr4fl-DYHGsIhOyZbv-EMy5kFUL5QLgzDJD5ZDSv45iHogvuJ_EeiLlnFi_MkEBwDucqoEEUYgC-EAAF5_PIzdwKMUDbJ3ZCIMQLjEK47vujAMY-EYcCK8r7q-zGkhGO2y8YVytcrugVcHHv8sN4hzeTq37el3APd9034SD2yndGKJ8DZLvS774fVhlMnVdcg7MiDY8wgB4KgKeqA_Q0DoOgUs2gZTIBAGZIQW5xxKC4nwEscgxDXggPQXQFJCAAAZiE8RAGmEQeEYCFEUOgYgEB4AcG6FwcIVF0DhC2EIAAetdSkhAiRkK1MPDoPBuGEIpCQikgjcDCJ4BOYCFAFCRHRFwMgEpdBcJhmSQg11pGyPkR0RR7D0A8hgKwtEUAxDcN4fDUkejgJyL4IYpRo5BAaJJCQuxcghEOIMUY8IwRYRBGscQnRZCb5BBEJEFw3DPGUhAWmGhaY6EMIQIg1xJZdD8FYG8cJRZRhCGyfAGUcgAACCI1KojoCsMoCIWAojRCscImosiFIEMUshQwxxtJyTKEUVYax1jSaAIY0BMBCB8SI8wkQyEZhXKMqA4zdCTPVJEaZyIyEUImV0CcL4fTMEQBQ20S5cALPGXIN4bcEHCCvCnHgitJ7hP2YcmAIgUG3PMPc7sEBiDTPCFs6QgKgA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview style=height:200px><div class=svelte-zfi5s3 id=smx-stable><table class="svelte-zfi5s3 fixedHeader is-bordered is-fullwidth is-hoverable is-striped stable table" style=min-width:100%;height:100%><thead class=svelte-zfi5s3 style="width:calc(100% - 0px)"> <tr class=svelte-zfi5s3> <th class="svelte-zfi5s3 isSortable" style=text-align:center title=ID>ID <th class="svelte-zfi5s3 isSortable" style=text-align:center title="FIRST NAME">FIRST NAME ▲ <th class="svelte-zfi5s3 isSortable" style=text-align:center title="LAST NAME">LAST NAME <th class="svelte-zfi5s3 isSortable" style=text-align:center title=EMAIL>EMAIL <th class="svelte-zfi5s3 isSortable" style=text-align:center title=GENDER>GENDER <th class="svelte-zfi5s3 isSortable" style=text-align:center title="IP ADDRESS">IP ADDRESS </thead> <tbody class=svelte-zfi5s3 style="height:calc(100% - 0px)"><tr class=svelte-zfi5s3> <td class=svelte-zfi5s3 style=text-align:center title=1>1 <td class=svelte-zfi5s3 style=text-align:center title=1>1 <td class=svelte-zfi5s3 style=text-align:center title=234><div class=buttons slot=component><button class="is-small button is-primary" size=is-small type=button> <span> Submit</span> </button> <button class="is-small button is-primary" size=is-small type=button> <span> Reset</span> </button></div> <td class=svelte-zfi5s3 style=text-align:center title=234>234 <td class=svelte-zfi5s3 style=text-align:center title=Mal1e>Mal1e <td class=svelte-zfi5s3 style=text-align:center title=192.168.>192.168. </td> <tr class="svelte-zfi5s3 is-selected"> <td class=svelte-zfi5s3 style=text-align:center title=2>2 <td class=svelte-zfi5s3 style=text-align:center title=2>2 <td class=svelte-zfi5s3 style=text-align:center title=234><div class=buttons slot=component><button class="is-small button is-primary" size=is-small type=button> <span> Submit</span> </button> <button class="is-small button is-primary" size=is-small type=button> <span> Reset</span> </button></div> <td class=svelte-zfi5s3 style=text-align:center title=234>234 <td class=svelte-zfi5s3 style=text-align:center title=Male>Male <td class=svelte-zfi5s3 style=text-align:center title=192.168.>192.168. </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><script>
|
||
import { Stable } from 'svelma-pro'
|
||
import {Button} from "svelma-pro";
|
||
|
||
let sortBy = "first_name";
|
||
let sortOrder = 1;
|
||
|
||
const colums2 = [{
|
||
key: "id",
|
||
title: "ID",
|
||
sortable: true,
|
||
},
|
||
{
|
||
key: "first_name",
|
||
title: "FIRST NAME",
|
||
sortable: true,
|
||
},
|
||
{
|
||
key: "last_name",
|
||
title: "LAST NAME",
|
||
sortable: true,
|
||
component: true
|
||
},
|
||
{
|
||
key: "email",
|
||
title: "EMAIL",
|
||
sortable: true
|
||
},
|
||
{
|
||
key: "gender",
|
||
title: "GENDER",
|
||
sortable: true,
|
||
},
|
||
{
|
||
key: "ip_address",
|
||
title: "IP ADDRESS",
|
||
sortable: true,
|
||
},
|
||
];
|
||
|
||
const data2 = [{
|
||
id: 234,
|
||
first_name: "1",
|
||
last_name: "234",
|
||
gender: "Mal1e",
|
||
ip_address: "192.168.",
|
||
email: "234",
|
||
},
|
||
{
|
||
id: 234,
|
||
first_name: "2",
|
||
last_name: "234",
|
||
gender: "Male",
|
||
ip_address: "192.168.",
|
||
email: "234",
|
||
},
|
||
];
|
||
|
||
function submit(v){
|
||
alert('当前行为'+v.id);
|
||
}
|
||
|
||
<Stable columns={colums2} rows={data2} bind:sortBy bind:sortOrder>
|
||
<div class="buttons" slot="component" let:row>
|
||
<Button type="is-primary" size="is-small" on:click={(e)=>submit(row)}>Submit</Button>
|
||
<Button type="is-primary" size="is-small" >Reset</Button>
|
||
</div>
|
||
</Stable></code></pre></figure></div> </div></div> <div id=smx-md-doc><h2 id=参数>参数</h2> <table> <thead> <tr> <th id=option>Option</th> <th id=type>Type</th> <th id=description>Description</th> </tr> </thead> <tbody> <tr> <td><code>columns</code></td> <td>Object[]</td> <td>列配置</td> </tr> <tr> <td><code>rows</code></td> <td>Object[]</td> <td>行数据</td> </tr> <tr> <td><code>sortBy</code></td> <td>String</td> <td>需要排序列key</td> </tr> <tr> <td><code>sortOrder</code></td> <td>Number</td> <td>排序 <code>1</code> = 升序, <code>-1</code> 降序</td> </tr> <tr> <td><code>clickCol</code></td> <td>function</td> <td>event listener/callback</td> </tr> <tr> <td><code>clickRow</code></td> <td>function</td> <td>event listener/callback</td> </tr> <tr> <td><code>clickCell</code></td> <td>function</td> <td>event listener/callback</td> </tr> <tr> <td><code>classNameTable</code></td> <td>String/Array</td> <td>class name(s) for table element</td> </tr> <tr> <td><code>classNameThead</code></td> <td>String/Array</td> <td>class name(s) for thead element</td> </tr> <tr> <td><code>classNameTbody</code></td> <td>String/Array</td> <td>class name(s) for tbody element</td> </tr> <tr> <td><code>classNameSelect</code></td> <td>String/Array</td> <td>class name(s) for select elements</td> </tr> <tr> <td><code>classNameRow</code></td> <td>String/Array</td> <td>class name(s) for row elements</td> </tr> <tr> <td><code>classNameCell</code></td> <td>String/Array</td> <td>class name(s) for cell elements</td> </tr> <tr> <td><code>fullwidth</code></td> <td>Boolean</td> <td>是否全宽度</td> </tr> <tr> <td><code>bordered</code></td> <td>Boolean</td> <td>为所有单元格添加边框</td> </tr> <tr> <td><code>hoverable</code></td> <td>Boolean</td> <td>在每行上添加悬停效果</td> </tr> <tr> <td><code>striped</code></td> <td>Boolean</td> <td>在表中添加条纹</td> </tr> <tr> <td><code>narrow</code></td> <td>Boolean</td> <td>使单元格变窄</td> </tr> <tr> <td><code>custom</code></td> <td>Boolean</td> <td>自定义列</td> </tr> <tr> <td><code>tWidth</code></td> <td>String</td> <td>宽度</td> </tr> <tr> <td><code>tHeight</code></td> <td>String</td> <td>高度</td> </tr> <tr> <td><code>fixedHeader</code></td> <td>Boolean</td> <td>固定表头,固定表头时需要设置父级div高度或者自定义<code>tHeight</code>。</td> </tr> <tr> <td><code>activedRowKey</code></td> <td>Array</td> <td>选中key</td> </tr> <tr> <td><code>key</code></td> <td>String</td> <td>唯一id，设置激活行时必须设置</td> </tr> </tbody> </table> <h3 id=events>Events</h3> <p>点击事件</p> <ul> <li>clickCell: <code>event</code>, <code>col</code>, <code>key</code></li> <li>clickRow: <code>event</code>, <code>row</code></li> <li>clickCol: <code>event</code>, <code>row</code>, <code>key</code></li> <li>checked: <code>event</code>,<code>checkbox</code></li> </ul> <p><em>‡</em> 字段允许双向绑定</p> <h2 id=列配置>列配置</h2> <table> <thead> <tr> <th id=option>Option</th> <th id=type>Type</th> <th id=description>Description</th> </tr> </thead> <tbody> <tr> <td><code>key</code></td> <td>String</td> <td>数据唯一key</td> </tr> <tr> <td><code>title</code></td> <td>String</td> <td>显示标题</td> </tr> <tr> <td><code>[class]</code></td> <td>String</td> <td>单元格指定样式类名</td> </tr> <tr> <td><code>[sortable]</code></td> <td>Boolean</td> <td>是否开启排序</td> </tr> <tr> <td><code>[filterOptions]</code></td> <td>Array/Function</td> <td><em>optional</em> array of objects with <code>name</code> and <code>value</code>. Function is provided array of rows</td> </tr> <tr> <td><code>[filterValue]</code></td> <td>String</td> <td>要过滤的值，通常与值相同</td> </tr> <tr> <td><code>[headerClass]</code></td> <td>String</td> <td>标题头指定样式类名</td> </tr> <tr> <td><code>[renderValue]</code></td> <td>Function</td> <td>自定义呈现渲染html</td> </tr> <tr> <td><code>component</code></td> <td>Boolean</td> <td>展示自定义组件,目前只允许针对某一列进行设置</td> </tr> </tbody> </table> <h2 id=样式配置>样式配置</h2> <p>在引入bluma的scss样式下，我们可以使用变量来控制表格风格样式。</p> <table> <thead> <tr> <th id=name>Name</th> <th id=type>Type</th> <th id=default_value>Default value</th> <th id=computed_value>Computed value</th> </tr> </thead> <tbody> <tr> <td>$table-color</td> <td>color</td> <td>$text-strong</td> <td>hsl(0, 0%, 21%)</td> </tr> <tr> <td>$table-background-color</td> <td>color</td> <td>$scheme-main</td> <td>hsl(0, 0%, 100%)</td> </tr> <tr> <td>$table-cell-border</td> <td>size</td> <td>1px solid $border</td> <td></td> </tr> <tr> <td>$table-cell-border-width</td> <td>size</td> <td>0 0 1px</td> <td></td> </tr> <tr> <td>$table-cell-padding</td> <td>size</td> <td>0.5em 0.75em</td> <td></td> </tr> <tr> <td>$table-cell-heading-color</td> <td>color</td> <td>$text-strong</td> <td>hsl(0, 0%, 21%)</td> </tr> <tr> <td>$table-head-cell-border-width</td> <td>size</td> <td>0 0 2px</td> <td></td> </tr> <tr> <td>$table-head-cell-color</td> <td>color</td> <td>$text-strong</td> <td>hsl(0, 0%, 21%)</td> </tr> <tr> <td>$table-foot-cell-border-width</td> <td>size</td> <td>2px 0 0</td> <td></td> </tr> <tr> <td>$table-foot-cell-color</td> <td>color</td> <td>$text-strong</td> <td>hsl(0, 0%, 21%)</td> </tr> <tr> <td>$table-head-background-color</td> <td>string</td> <td>transparent</td> <td></td> </tr> <tr> <td>$table-body-background-color</td> <td>string</td> <td>transparent</td> <td></td> </tr> <tr> <td>$table-foot-background-color</td> <td>string</td> <td>transparent</td> <td></td> </tr> <tr> <td>$table-row-hover-background-color</td> <td>color</td> <td>$scheme-main-bis</td> <td>hsl(0, 0%, 98%)</td> </tr> <tr> <td>$table-row-active-background-color</td> <td>color</td> <td>$primary</td> <td>hsl(171, 100%, 41%)</td> </tr> <tr> <td>$table-row-active-color</td> <td>color</td> <td>$primary-invert</td> <td>#fff</td> </tr> <tr> <td>$table-striped-row-even-background-color</td> <td>color</td> <td>$scheme-main-bis</td> <td>hsl(0, 0%, 98%)</td> </tr> <tr> <td>$table-striped-row-even-hover-background-color</td> <td>color</td> <td>$scheme-main-ter</td> <td>hsl(0, 0%, 96%)</td> </tr> <tr> <td>$table-colors</td> <td>function</td> <td>$colors</td> <td>mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)</td> </tr> </tbody> </table> <h2 id=案例>案例</h2> <pre><code class="html language-html"><script>
|
||
import Table from "../../Table";
|
||
const rows = [
|
||
/** 数据体 */
|
||
];
|
||
const columns = [
|
||
/** 列设置 */
|
||
];
|
||
</script>
|
||
|
||
<Table columns="{columns}" rows="{rows}"></Table></code></pre> <h2 id=sample-data-and-config>Sample Data and config</h2> <pre><code class="js language-js">// define some sample data...
|
||
const rows = [
|
||
{ id: 1, first_name: "Marilyn", last_name: "Monroe", gender: "female" },
|
||
{ id: 2, first_name: "Abraham", last_name: "Lincoln", gender: "male" },
|
||
{ id: 3, first_name: "Mother", last_name: "Teresa", gender: "female" },
|
||
{ id: 4, first_name: "John F.", last_name: "Kennedy", gender: "male" },
|
||
{ id: 5, first_name: "Martin Luther", last_name: "King", gender: "male" },
|
||
{ id: 6, first_name: "Nelson", last_name: "Mandela", gender: "male" },
|
||
{ id: 7, first_name: "Winston", last_name: "Churchill", gender: "male" },
|
||
{ id: 8, first_name: "George", last_name: "Soros", gender: "male" },
|
||
{ id: 9, first_name: "Bill", last_name: "Gates", gender: "male" },
|
||
{ id: 10, first_name: "Muhammad", last_name: "Ali", gender: "male" },
|
||
{ id: 11, first_name: "Mahatma", last_name: "Gandhi", gender: "male" },
|
||
{ id: 12, first_name: "Margaret", last_name: "Thatcher", gender: "female" },
|
||
{ id: 13, first_name: "Christopher", last_name: "Columbus", gender: "male" },
|
||
{ id: 14, first_name: "Charles", last_name: "Darwin", gender: "male" },
|
||
{ id: 15, first_name: "Elvis", last_name: "Presley", gender: "male" },
|
||
{ id: 16, first_name: "Albert", last_name: "Einstein", gender: "male" },
|
||
{ id: 17, first_name: "Paul", last_name: "McCartney", gender: "male" },
|
||
{ id: 18, first_name: "Queen", last_name: "Victoria", gender: "female" },
|
||
{ id: 19, first_name: "Pope", last_name: "Francis", gender: "male" }
|
||
// etc...
|
||
];
|
||
|
||
// define column configs
|
||
const columns = [
|
||
{
|
||
key: "id",
|
||
title: "ID",
|
||
sortable: true,
|
||
filterOptions: rows => {
|
||
// generate groupings of 0-10, 10-20 etc...
|
||
let nums = {};
|
||
rows.forEach(row => {
|
||
let num = Math.floor(row.id / 10);
|
||
if (nums[num] === undefined)
|
||
nums[num] = { name: `${num * 10} to ${(num + 1) * 10}`, value: num };
|
||
});
|
||
// fix order
|
||
nums = Object.entries(nums)
|
||
.sort()
|
||
.reduce((o, [k, v]) => ((o[k] = v), o), {});
|
||
return Object.values(nums);
|
||
},
|
||
filterValue: v => Math.floor(v.id / 10),
|
||
headerClass: "text-left"
|
||
},
|
||
{
|
||
key: "first_name",
|
||
title: "FIRST_NAME",
|
||
sortable: true,
|
||
filterOptions: rows => {
|
||
// use first letter of first_name to generate filter
|
||
let letrs = {};
|
||
rows.forEach(row => {
|
||
let letr = row.first_name.charAt(0);
|
||
if (letrs[letr] === undefined)
|
||
letrs[letr] = {
|
||
name: `${letr.toUpperCase()}`,
|
||
value: letr.toLowerCase()
|
||
};
|
||
});
|
||
// fix order
|
||
letrs = Object.entries(letrs)
|
||
.sort()
|
||
.reduce((o, [k, v]) => ((o[k] = v), o), {});
|
||
return Object.values(letrs);
|
||
},
|
||
filterValue: v => v.first_name.charAt(0).toLowerCase()
|
||
},
|
||
{
|
||
key: "last_name",
|
||
title: "LAST_NAME",
|
||
sortable: true,
|
||
filterOptions: rows => {
|
||
// use first letter of last_name to generate filter
|
||
let letrs = {};
|
||
rows.forEach(row => {
|
||
let letr = row.last_name.charAt(0);
|
||
if (letrs[letr] === undefined)
|
||
letrs[letr] = {
|
||
name: `${letr.toUpperCase()}`,
|
||
value: letr.toLowerCase()
|
||
};
|
||
});
|
||
// fix order
|
||
letrs = Object.entries(letrs)
|
||
.sort()
|
||
.reduce((o, [k, v]) => ((o[k] = v), o), {});
|
||
return Object.values(letrs);
|
||
},
|
||
filterValue: v => v.last_name.charAt(0).toLowerCase()
|
||
},
|
||
{
|
||
key: "gender",
|
||
title: "GENDER",
|
||
renderValue: v => v.gender.charAt(0).toUpperCase() + v.gender.substring(1), // capitalize
|
||
sortable: true,
|
||
filterOptions: ["male", "female"] // provide array
|
||
}
|
||
];</code></pre></div> </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> |