经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现table表格里面数组多层嵌套取值
来源:jb51  时间:2022/8/1 19:09:49  对本文有异议

vue table表格里面数组多层嵌套取值

我现在是在表格里拿到级联选择器的多选的id,然后要根据这个id来匹配一个嵌套了三层的数组的第三层id,来拿名字渲染

表格部分

  1. <tr style="height: 44px;line-height: 44px;">
  2. ? ? ? ? ? ? ? ? <td style="border: 1px solid #ddd;">提醒给</td>
  3. ? ? ? ? ? ? ? ? <td style="border: 1px solid #ddd;">
  4. ? ? ? ? ? ? ? ? ? <!-- {{editForm.uids.toString().split(',')}} -->
  5. ? ? ? ? ? ? ? ? ? <span v-for="item in editForm.uids.toString().split(',')" :key="item.id">
  6. ? ? ? ? ? ? ? ? ? ? <!-- <p>{{dataHandle(editForm.uids)}}</p> -->
  7. ? ? ? ? ? ? ? ? ? ? <p>{{dataHandle(item)}}</p>
  8. ? ? ? ? ? ? ? ? ? </span>
  9. ? ? ? ? ? ? ? ? </td>
  10. ? ? ? ? ? ? ? </tr>
  11. ``

methods里面定义方法

  1. ?// 提醒给点击事件
  2. dataHandle(item) {
  3. ? ?let ary = []
  4. ?let name = ''
  5. ? let result = getUserName(this.options4)
  6. ? result.forEach(v2 => {
  7. ? ? if (item == v2.id) {
  8. ? ? ? name = v2.corp_name
  9. ? ? }
  10. ? })
  11. ? return name
  12. ??
  13. ? function getUserName(item) {
  14. ? ? item.forEach(v1 => {
  15. ? ? ? if (v1.children) return getUserName(v1.children)
  16. ? ? ? else {
  17. ? ? ? ? ary.push(v1)
  18. ? ? ? }
  19. ? ? })
  20. ? ? return ary
  21. ? }
  22. },

vue 多层数组嵌套循环,动态取值匹配

  1. tableData:[], //存储数组
  2. arrTarName:[] //结果数组
  3. this.tableData.push({
  4. siteName:i.siteName,
  5. tabdata:result.data
  6. });
  7. //循环+判断取值
  8. for (let k = 0; k < result.data.length; k++) {
  9. if (this.arrTarName.length == 0) {
  10. this.arrTarName.push({
  11. indexName: result.data[k].indexName,
  12. polTracesouCount: result.data[k].polTracesouCount
  13. })
  14. } else {
  15. let isExist = false;
  16. for (let l = 0; l < this.arrTarName.length; l++) {
  17. if (this.arrTarName[l].indexName == result.data[k].indexName) {
  18. isExist = true;
  19. this.arrTarName[l].polTracesouCount = this.arrTarName[l].polTracesouCount + result.data[k].polTracesouCount;
  20. break;
  21. }
  22. }
  23. if (!isExist) {
  24. this.arrTarName.push({
  25. indexName: result.data[k].indexName,
  26. polTracesouCount: result.data[k].polTracesouCount
  27. })
  28. }
  29. }
  30. }
  31. console.log(this.arrTarName)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号