我在加载 Svelte 时遇到问题 table

Question

没有任何关于为 Svelte 创建数据表的普通示例。我发现了几个我想从中学习的例子，但仍然不行。现在我正在尝试在 REPL 选项卡上构建它，在结果选项卡中我得到了两行，但所有三个字段都是相同的，而不是像我期望的那样独一无二。

我试过 []、切片、连接、每行各一个，可能还有一些我现在想不起来的。

<script>
import { beforeUpdate, createEventDispatcher, onMount } from 'svelte';

export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy'},{Color:'RED', Car:'Pinto', Brand:'Ford'}];
export let columns = ["Color", "Car", "Brand"];
export let rows = ['blue','Camaro','Chevy'];
//export let try1 = JSON.parse(faketable);

export let clickable = true

const dispatch = createEventDispatcher();

export function click(row) {
        if (!clickable) {
            return;
        }
        if (getSelection().toString()) {
            // Return if some text is selected instead of firing the row-click event.
            return;
        }
        dispatch('row-click', row);
        // console.log('click', row);
}
</script>



<div>
    <h3 class="panel-title">Please work!</h3>   
        <table ref="table" class="table table-striped table-hover" style="width:100%">
            <thead>
                <tr>                    
                    {#each columns as column, x}    
                    <th style="width: { column.width ? column.width : 'auto' }" align="center"> 
                        {column}
                    </th>                       
                    {/each}                 
                </tr>
            </thead>
            <tbody>
                {#each faketable as row, y}
                <tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">         
                    {#each columns as column, x}
                    <td align="center">                 
                        {row.Color}
                    </td> 
                    {/each}
                </tr>
                {/each}
            </tbody>
        </table>
</div>

<style>

    tr.clickable {
        cursor: pointer;
    }
    table {
        table-layout: fixed;
    }

  table tr td {
        padding: 0 0 0 56px;
        height: 48px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.87);
        border-bottom: solid 1px #DDDDDD;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
    }
    table th {
        border-radius: 0;
    }
    table tbody tr:hover {
        background-color: #EEE;
    }
</style>

headers 看起来我希望它们是颜色、汽车和品牌。但是我希望每一行 faketable 分别是 return Blue Camaro Chevy 然后是 Red Pinto Ford。

Answer 1

你有 {row.Color} 而你应该有 {row[column]}。 Fix that, and it works

我在加载 Svelte 时遇到问题 table

I'm having trouble loading a Svelte table

datatable

svelte