Vue3后端获取数据后根据属性的不同值加载到不同的Table中

shikern

已于 2024-03-04 14:12:02 修改

阅读量507

点赞数 5

文章标签： vue.js javascript 前端

于 2024-03-04 14:07:22 首次发布

本文链接：https://blog.csdn.net/qq_34598215/article/details/136450452

版权

文章介绍了如何使用Vue.js中的scriptsetup语法，根据后端传来的数据tableData，将不同类型（A和B）的数据分别添加到表格一和表格二，实现动态展示。作者提供了具体的代码示例和实现步骤。

摘要由CSDN通过智能技术生成

问题描述

后端获取的数据：
tableData是一个数组

[
    {
        "type":"A",
        "t1":"张三",
        "t2":"A01"
    },
    {
        "type":"B",
        "t1":"李四",
        "t2":"初一3班"
    },
    {
        "type":"A",
        "t1":"王晓六",
        "t2":"A02"
    },
    {
        "type":"B",
        "t1":"秦汉",
        "t2":"初二1班"
    }
]

其中type有两个值A,B。type=A时在表格一中显示，type= B时在表格二中显示。效果如图
在这里插入图片描述

解决思路

表格一、二分别绑定不同的数据源t1、t2
对后端传来数据tableData进行遍历，type=A的数据添加到t1，type=B的数据添加到t2。

实现代码

<script setup>
import { ref } from 'vue'
const tabelData = ref([
    {
        "type":"A",
        "t1":"张三",
        "t2":"A01"
    },
    {
        "type":"B",
        "t1":"李四",
        "t2":"初一3班"
    },
    {
        "type":"A",
        "t1":"王晓六",
        "t2":"A02"
    },
    {
        "type":"B",
        "t1":"秦汉",
        "t2":"初二1班"
    }
])

const t1 = ref([])
const t2 = ref([])

const tableList =()=>{
    t1.value = [];
    t2.value = [];
    for(let i=0;i < tabelData.value.length;i++){
        let item = tabelData.value[i];
        if(item.type == 'A'){
            t1.value.push(item);
        }
        if(item.type == 'B'){
            t2.value.push(item);
        }
    }
}


</script>
<template>
    <div>
        <el-button type="primary" @click="tableList">test</el-button>
    </div>
    <h3>表格一：</h3>
    <div>
        <el-table :data="t1" key="t1">
            <el-table-column label="姓名" prop="t1"></el-table-column>
            <el-table-column label="编号" prop="t2"></el-table-column>
        </el-table>
    </div>
    <h3>表格二：</h3>
    <div >
        <el-table :data="t2" key="t2">
            <el-table-column label="姓名" prop="t1"></el-table-column>
            <el-table-column label="年级" prop="t2"></el-table-column>
        </el-table>
    </div>
  
</template>