datatable - 我在加载 Svelte 表格时遇到问题
问题描述
没有任何关于为 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>
标题看起来像我希望它们是颜色、汽车和品牌。但是每一行我都希望 faketable 分别返回 Blue Camaro Chevy 然后 Red Pinto Ford。
解决方案
你有{row.Color}
你应该有的地方{row[column]}
。修复它,它可以工作
推荐阅读
- python - 如何从 github 安装存储库?
- c# - Task.Run 仍然冻结 UI
- variables - 如何使用变量作为不同变量的数据类型?
- r - R 包 twitteR 中的推文函数之间无法解释的差异
- html - 正则表达式排除与负前瞻匹配的所有组
- laravel - 获取时无法更新函数内部的 vue 数据?
- regex - pgbadger 匹配 RDS 日志的正确模式是什么?
- python - 如何让创建语句尊重自定义 Django 字段中的“from_db_value”?
- google-cloud-platform - 使用 AutoML 对象检测接收到的 JSON 负载无效
- java - CountDownTimer 为每个循环增加时间