У меня проблемы с загрузкой таблицы Svelte - PullRequest
Новая
       7

У меня проблемы с загрузкой таблицы Svelte

1 голос
/ 19 июня 2019

Нет никаких ванильных примеров по созданию таблицы данных для 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>

Заголовки выглядят так, как будто я хочу, чтобы они были Color, Car и Brand. Но в каждом ряду я ожидаю, что faketable вернет Blue Camaro Chevy, а затем Red Pinto Ford соответственно.

1 Ответ

1 голос
/ 19 июня 2019

У вас есть {row.Color}, где вы должны иметь {row[column]}. Исправьте это, и это работает

...