Javascript 根据所选值Svelte显示相应的数据

我想根据所选项目显示某些值

基本上，我有一个在模式名称之间切换的选项卡。当用户单击其中一个选项卡时，将显示该架构下的相应表名。这是从我这边做的

接下来，我想显示所选表名的列名。例如，如果用户单击表A，则页面应显示所有属性名称。我是新来的苗条，我不知道如何做到这一点

单击表名时如何显示相应表的列名

苗条的

<script>
    let data = [];  //data for distinct schema name
    let activeItem; //holds the activeitem
    let name = []; //name for table name

    
    onMount(async () => {
        const res = await fetch('http://localhost:3000/api/dist_schema.json');  //wait until the promise return result
        data = await res.json();
        activeItem = data[0];
        tabchange;
        // tableName();
    });
    const tabchange = (e) =>{
        activeItem = e.detail;
    }

    
    onMount(async () => {
        const response = await fetch('http://localhost:3000/api/table_schema_name.json');  //wait until the promise return result
        name = await response.json();
        
    });
</script>

<Tabs {activeItem} {data} on:tabchange={tabchange}/>

{#if activeItem === "common"}
        <div class="content">
            <div class="tname">
                {#each name as names }
                    {#if names.table_schema === activeItem}
                        <ul>
                            <li>{names.table_name}</li>
                        </ul>
                    {/if}
                {/each}
            </div>
                    <Table />
    </div>  
{/if}

让数据=[]//用于不同架构名称的数据
让活动项//保存活动项
让name=[]//表名的名称
onMount（异步（）=>{
const res=等待取数（'http://localhost:3000/api/dist_schema.json“）；//等待承诺返回结果
data=wait res.json（）；
activeItem=数据[0]；
tabchange；
//tableName（）；
});
常数tabchange=（e）=>{
activeItem=e.detail；
}
onMount（异步（）=>{
const response=等待获取（'http://localhost:3000/api/table_schema_name.json“）；//等待承诺返回结果
name=wait response.json（）；
});
{#如果activeItem==“公共”}
{#每个名字都是名字}
{#if names.table_schema===activeItem}

{names.table_name}

{/if}
{/每个}
{/if}

Table.svelte（以表格形式显示列名的组件）

列名
列名
数据类型
//这应该在一个显示所有列名的循环中
parm_group_name//从nw开始，我对其进行了硬编码以查看值
瓦尔查尔（225）

---

我尝试使用来自Svelte的createEventDispatcher，但没有成功。任何帮助都将不胜感激。

您可以将数据传递到

表

组件中，并使用该组件渲染列

导出let数据=[]
...
{#每个数据作为项目}
....
{/每个}

从父组件传入数据：

---

其中，

selectedData

可能是您的

名称

数组或其他东西的子集？（从您的问题中，我不完全清楚这一部分）

对不起，我可以问一下您所指的选定数据是什么吗？包含您要显示的所有列名的数组

<div class='container'>
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-bordered table-hover dt-responsive">
                <caption class="text-center">Column names</caption>
                    <thead>
                        <tr>
                            <th>Column Name</th>
                            <th>Data Type</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr}>  //this should be in a loop that display all the column name 
                            <td>parm_group_name</td>  //as of nw, I hardcoded it to see the value
                            <td>varchar(225)</td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </div>
</div>