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

 更新时间:2022年08月01日 16:49:12   作者:神探小白牙  
这篇文章主要介绍了vue实现table表格里面数组多层嵌套取值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

表格部分

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

methods里面定义方法

 // 提醒给点击事件
dataHandle(item) {
   let ary = []
 let name = ''
  let result = getUserName(this.options4)
  result.forEach(v2 => {
    if (item == v2.id) {
      name = v2.corp_name
    }
  })
  return name
  
  function getUserName(item) {
    item.forEach(v1 => {
      if (v1.children) return getUserName(v1.children)
      else {
        ary.push(v1)
      }
    })
    return ary
  }
},

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

tableData:[], //存储数组
arrTarName:[] //结果数组
 
this.tableData.push({
  siteName:i.siteName,
  tabdata:result.data
}); 
 
//循环+判断取值
for (let k = 0; k < result.data.length; k++) {
    if (this.arrTarName.length == 0) {
        this.arrTarName.push({
            indexName: result.data[k].indexName,
            polTracesouCount: result.data[k].polTracesouCount
        })
    } else {
        let isExist = false;
        for (let l = 0; l < this.arrTarName.length; l++) {
            if (this.arrTarName[l].indexName == result.data[k].indexName) {
                isExist = true;
                this.arrTarName[l].polTracesouCount = this.arrTarName[l].polTracesouCount + result.data[k].polTracesouCount;
                break;
            }
        }
        if (!isExist) {
            this.arrTarName.push({
                indexName: result.data[k].indexName,
                polTracesouCount: result.data[k].polTracesouCount
            })
        }
    }
}
console.log(this.arrTarName)

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

相关文章

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    Vue组件通信方式(父传子、子传父、兄弟通信)

    这篇文章主要介绍了Vue组件通信方式(父传子、子传父、兄弟通信),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 十个有用的自定义Vue钩子函数总结

    十个有用的自定义Vue钩子函数总结

    这篇文章主要为大家介绍了十个Vue.js中有用的自定义钩子,让我们的代码更加好看。文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-04-04
  • vuedraggable+element ui实现页面控件拖拽排序效果

    vuedraggable+element ui实现页面控件拖拽排序效果

    这篇文章主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 详解在vue-cli中使用graphql即vue-apollo的用法

    详解在vue-cli中使用graphql即vue-apollo的用法

    这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue实现图形验证码登录

    vue实现图形验证码登录

    这篇文章主要为大家详细介绍了vue实现图形验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • vue使用ElementUI时导航栏默认展开功能的实现

    vue使用ElementUI时导航栏默认展开功能的实现

    这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    学习vue有一段时间了,最近使用vue做了一套后台管理系统,其中使用最多就是递归组件,下面这篇文章主要给大家介绍了关于Vue利用递归实现树形菜单的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-11-11
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • vue实现右键弹出菜单

    vue实现右键弹出菜单

    这篇文章主要为大家详细介绍了vue实现右键弹出菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue3中nextTick()应用实例详解

    vue3中nextTick()应用实例详解

    这篇文章主要给大家介绍了关于vue3中nextTick()应用的相关资料,nextTick()等待下一次DOM更新刷新的工具方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论