如何根据 Svelte-Typescript 中的下拉值更改表格行数据答案

【问题标题】：How to change the table row data according to dropdown values in Svelte-Typescript如何根据 Svelte-Typescript 中的下拉值更改表格行数据
【发布时间】：2022-01-22 16:06:43
【问题描述】：

我有一个表格小部件，它是一个网格堆栈项。该表是使用 svelte 作为组件制作的。下拉项目和表格内容的数据从另一个打字稿文件（使用故事书故事文件执行此操作）传递到此组件。最初，绘制下拉项目，然后绘制表格数据。我想在更改下拉项时更改表格行数据。 Image for table widget

下拉列表和表格数据的代码如下所示

    <script lang="ts">
let selected

// passed from a stories.ts file as JSON string
export let dropdownitems: any
export let tableData 

const handlechange = (item) => {

// expected code for changing table row content
}
<script>

<div class="content">
    <div class="select">
        <select bind:value={selected} on:change={() => handlechange(selected)}>
            {#each JSON.parse(dropdownitems) as item}
                <option value={item.id}>
                    {item.name}
                </option>
            {/each}
        </select>
    </div>

    <table>
        <tr style="background:{color}">
            {#each tableData[0].title as item}
                <th>{item.label}</th>
            {/each}
        </tr>
        {#each tableData[0].content as data}
            <tr style="background:{data.color}">
                {#each data.rowcont as datacont}
                    <td>{datacont}</td>
                {/each}
            </tr>
        {/each}
    </table>
</div>

示例 tableData 对象

tableData =  [
                    {
                        title: [{ label: 'Subgroup' }, { label: '# of Students' }, { label: '% of 
                                 population' }],
                        content: [
                            { color: '#e8f0f6', rowcont: ['504', '3732', '5.67'] },
                            { color: '#fff', rowcont: ['ELL', '4164', '6.32'] },
                            { color: '#e8f0f6', rowcont: ['ESE', '14768', '22.48'] },
                            { color: '#fff', rowcont: ['FRL', '32776', '49.75'] },
                        ],
                    },
                ],

DropdownItems =  [
                {
                    id: 0,
                    name: 'Calculate based on incident location'
                },
                {
                    id: 1,
                    name: 'Calculate data based on current enrollment'
                },

            ],

选择下拉列表中的第二项时，数据要显示在表格行中

 Content =[ 
            {
                id: 0,
                data: [
                    { color: '#e8f0f6', rowcont: ['434', '3732', '5.67'] },
                    { color: '#fff', rowcont: ['ELL', '4164', '6.32'] },
                    { color: '#e8f0f6', rowcont: ['ESE', '14768', '22.48'] },
                    { color: '#fff', rowcont: ['FRL', '32776', '49.75'] },]
            },
          ]

【问题讨论】：

标签： typescript svelte storybook gridstack

【解决方案1】：

我不知道您想要的 API 是什么，但我假设您想告诉父/组件用户它应该更新数据。我也不知道你的stories.ts 长什么样，但我假设你手动实例化 Svelte 组件大致如下：

const instance = new Grid({ target: .., props: { dropdownitems: ..., data: ...}});

如果是，那么您可以像这样从您的组件中分派一个自定义事件：

<script lang="ts">
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();

let selected

// passed from a stories.ts file as JSON string
export let dropdownitems: any
export let tableData 

const handlechange = (item) => {
  // ...
  dispatch("select", item);
}
<script>

然后您可以在 stories.ts 中像这样在该组件上收听该事件：

instance.$on("select", (evt) => {
  // evt.detail contains selection
  const newData = getNewDataSomehow(evt.detail);
  instance.$set({ data: newData });
});

有关命令式组件 API 的更多信息，请参阅 Svelte 文档：https://svelte.dev/docs#run-time-client-side-component-api

【讨论】：