javascript - elementplus表格问题循环展示?
elementplus表格，如下图有两条数据，每行有多个city和address循环展示在一行，前端该怎么处理呢，返回数据格式如下
dataList: [ { date: “2022-05-31”, cityList:[ { city: "1",cityName:"北京",address:"xxx"}, { city: "2",cityName:"上海",address:"xxx"}, { city: "3",cityName:"苏州",address:"xxx"}, ] }, { date: “2022-06-01”, cityList:[ { city: "1",cityName:"北京",address:"xxx"}, { city: "2",cityName:"上海",address:"xxx"}, { city: "3",cityName:"苏州",address:"xxx"}, ] },]
共有1个答案
很简单啊，就是自己循环处理一下 el-table-item 就好了。
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <template v-for="index in countAddrInfo"> <el-table-column :prop="`cityList[${index - 1}].cityName`" :label="'Name' + index" width="180" :formatter="(row, column, cellValue) => cellValue || '--'" /> <el-table-column :prop="`cityList[${index - 1}].address`" :label="'Address' + index" :formatter="(row, column, cellValue) => cellValue || '--'" /> </template> </el-table></template><script lang="ts" setup>const tableData = [ { date: "2022-05-31", cityList:[ { city: "1",cityName:"北京",address:"xxx"}, { city: "2",cityName:"上海",address:"xxx"}, { city: "3",cityName:"苏州",address:"xxx"}, ] }, { date: "2022-06-01", cityList:[ { city: "1",cityName:"北京",address:"xxx"}, { city: "2",cityName:"上海",address:"xxx"}, { city: "3",cityName:"苏州",address:"xxx"}, ] }, { date: "2022-06-02", cityList:[ { city: "1",cityName:"北京",address:"xxx"}, { city: "2",cityName:"上海",address:"xxx"} ] },]const countAddrInfo = tableData.reduce((total, current) => Math.max(total, current.cityList.length), 0)</script>Element Plus Playground
-
问题内容： 我有以下代码片段。 上面的代码用于生成5个链接，并将每个链接与警报事件绑定以显示当前链接ID。但这是行不通的。当您单击生成的链接时，它们都说“链接5”。 但是以下代码段符合我们的预期。 这里引用了以上两个片段。 但是它是如何工作的以及 关闭 是如何工作的，这些都是我无法理解的。为什么第一个不起作用而第二个却起作用？任何人都可以对魔术进行详细说明吗？ 谢谢。 问题答案： 解释第一个示例：
-
想循环上传每个文件，循环第一次时isrepeat参数为true，拿到第一次循环上传成功后台返回的路径，作为往下循环的pathList，并且往下循环isrepeat参数为false，思路有点凌乱乱...
-
这是我写的html ipv6地址的时候，前面的图标显示的特别小 应该怎么解决这个问题了？
-
我正在尝试创建一个名为“NIM”的游戏（如果您不熟悉，请参阅代码介绍）。当我输出“块”时，它们的间隔不是均匀的。我可能错过了显而易见的，但有人能指出我错在哪里吗。
-
我是java的新手，我正在编写这个简短的程序，您可以在其中猜测1到10之间的数字。正确的数字存储为整数。如果您猜测较低的数字，它应该说“正确的数字较高”，如果您猜测较高，它应该说“正确的数字较低”。这是我所拥有的： 所以很明显这是行不通的，因为如果你输入一个更小的数字，它会跳到下一个数字，即使这个数字更大，它也是正确的。那么，我如何解决这个问题，让它检查两个语句呢？抱歉解释得不好。谢了。
-
这段代码是为一个基本的杂货计算器的按钮。当我按下按钮时，一个输入对话框显示您在哪里输入您的商品价格。我遇到的问题是，我不知道如何获得循环，使输入对话框在输入后弹出。 我希望它总是回来，除非用户选择ok与nothing或cancel，在这种情况下，循环应该中断并填充剩余的框。使用当前的代码，我必须每次手动按下按钮来恢复对话框。我一直在玩不同的while条件和if语句，但我似乎无法让它发挥作用。我是一