大家好,我们的项目需要用svelte把数据通过网页的形式进行展示,我们目前用的表格控件在实际应用的过程中出现了数据只见没有分隔,美观度不佳的问题。请问大家有没有推荐的svelte表格控件,可以解决我们的这个问题。或看看我们目前所用的控件代码应该怎么去做修改。
目前,网页运行后的表格的效果:
https://drive.google.com/file/d/1eIDs16X2oh5KgLDTDzkPV69wFodCxHIT/view?usp=sharing
<svelte:head>
<title>DataTable</title>
</svelte:head>
<script>
export let data
import { Datatable, rows} from 'svelte-simple-datatables'
import {range} from './range.js';
import { onDestroy } from 'svelte';
import { createEventDispatcher } from 'svelte';
const settings = { columnFilter: false, sortable: false, }
const dispatch = createEventDispatcher();
function dataTableUpdate() {
dispatch('dataTableUpdate', {
dataTableUpdate: true
})
}
onDestroy(() => {
dataTableUpdate();
});
</script>
<Datatable {settings} {data}>
<thead>
<th>Nr.</th>
{#each range(1,data[0].length+1,1) as i}
<th>{i}</th>
{/each}
</thead>
<tbody>
{#if (data.length > 0 && data[0].length > 0)}
{#each range(1,$rows.length+1,1) as j}
<tr>
<td>{j}</td>
{#each $rows[j-1] as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
{/if}
</tbody>
</Datatable>
<style>
td{
text-align:center;
padding:4px 0;
border-right: 1px black;
}
</style>