Как сделать шаблон слота без тегов в Svelte как Vue - PullRequest
Новая
       7

Как сделать шаблон слота без тегов в Svelte как Vue

0 голосов
/ 20 сентября 2019

Я влюбляюсь в svelte и пытаюсь создать компонент, похожий на таблицу данных, который можно использовать повторно.Я хочу определить заголовки и шаблоны строк с помощью клиентского кода, поэтому я добавил заголовки и слоты строк в свой компонент Table.svelte.Я не хочу показывать теги <tr> клиентскому коду из-за обработки некоторых событий клика для всей строки и так далее.Таким образом, слот клиента должен содержать только шаблон строки из тегов <td>.

В Vue я могу использовать «пустой» тег <template>, который вообще не отображает тег.

Какдобиться этого в svelte, как vue делает?

Table.svelte 

<script>
    import {onMount} from "svelte";

    let rows = [];
    let selected = null;

    onMount(() => {
        setTimeout(() => {
            rows = [
                {number: "01/30/2019"},
                {number: "01/30/2019"},
            ];
        }, 1000)
    });

    const handleSelect = i => () => {
        if (selected === i) {
            selected = null;
        } else {
            selected = i;
        }
    };
</script

<table>
    <thead>
            <tr>
                <slot name="headers"/>
            </tr>
    </thead>
    <tbody>
    {#each rows as row, i}
    <tr on:click={handleSelect(i)} class:is-selected="{selected === i}">
        <slot name="row" {row}  />
    </tr>
    {/each}
    </tbody>
</table>

App.svelte 

<script>
    import Table from './Table.svelte'
</script>

<Table>
    <template slot="headers">
        <th>Number</th>
    </template>
    <template slot="row" let:row>
        <td>{row.number}</td>
    </template>
</Table>

Это ссылка на REPL https://svelte.dev/repl/92b3a93855124da7b2d991f38353f744?version=3.12.1

...