时间戳

首页 > 解决方案 > 实现自定义 Svelte Grid 库

svelte-component - 实现自定义 Svelte Grid 库

问题描述

我正在做一个个人项目，想用我的<Desk>组件制作一个可移动的网格。所有组件都按我的意愿工作，但是当使用我安装的“svelte-grid”库时，我无法让程序形成<Desk>组件的网格。

我正在尝试创建一个网格，显示来自指定<Desk>的每个. \studentperiod

链接到我得到图书馆的地方 - > https://svelte-grid.vercel.app/usage

课堂

<script>
    export let roster 
    import Desk from "./Desk.svelte"
    import AddStudent from './AddStudent.svelte'
    import Grid from "svelte-grid";
    import gridHelp from "svelte-grid/build/helper/index.mjs";

    $: roster = roster
    let prd = 1
    $: period = period
    $: period = roster.filter(function(stud) {
        return stud.period === prd
    }
    )
    // implement gridHelp on each student in specified period
    for (student in period) {
        gridHelp.student({x: 0, y: 0, h: 0, id: student.id})
    }
    
</script>

<main>
    
    <div>
        <button on:click = {() => prd = 1}>Period 1</button>
        <button on:click = {() => prd = 2}>Period 2</button>
        <button on:click = {() => prd = 3}>Period 3</button>
        <button on:click = {() => prd = 4}>Period 4</button>
        <button on:click = {() => prd = 5}>Period 5</button>
    </div>
    
    <AddStudent /> 

    <!-- This is where I am trying to create the grid containing a desk for each student -->

    <Grid cols={3} bind:items={period} let:item={student}>
        <Desk>{student.id}</Desk>
    </Grid>

任何帮助将不胜感激！

标签： svelte-component

解决方案

桌面物品是否正在渲染？如果您在 Grid 组件上提供 rowHeight 怎么办（请参阅其他一些 svelte-grid 示例https://svelte.dev/repl/2cf339cc1dc14223a1457e386195e52d?version=3.42.4）

推荐阅读