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

目录
  • vue table表格里面数组多层嵌套取值
    • 表格部分
    • methods里面定义方法
  • vue 多层数组嵌套循环,动态取值匹配

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)

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

(0)

相关推荐

  • vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo

  • element table多层嵌套显示的实践

    有个需求是一个列表,里面包含多个单子,每个单子可以是唯一,也可以是多个合并之后的,而且每个单子下面显示的是另外一个表格,来上图 每行的操作还不一样,然后通过官网的一些例子总结了一下合并代码 <template> <div class="app-container"> <div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;&q

  • vue简单的二维数组循环嵌套方式

    目录 二维数组循环嵌套方式 vue循环数组.循环嵌套数组v-for 利用Vue循环输出标签 前端页面输出循环嵌套数组 二维数组循环嵌套方式 <div class="box">   <div class="color">      <div>蓝色/尺码</div>   </div>   //这是简单的布局 .box{     border: 1px solid red;     display: flex;

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

    目录 vue table表格里面数组多层嵌套取值 表格部分 methods里面定义方法 vue 多层数组嵌套循环,动态取值匹配 vue table表格里面数组多层嵌套取值 我现在是在表格里拿到级联选择器的多选的id,然后要根据这个id来匹配一个嵌套了三层的数组的第三层id,来拿名字渲染 表格部分 <tr style="height: 44px;line-height: 44px;">                 <td style="border: 1p

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

  • vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

  • vue+iview Table表格多选切换分页保持勾选状态

    本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下 第一种情况(配合后端做选中数据处理) 定义三个参数,是否为全选(isSelectAll).不是全选时选择的数据(selectObject: []).反选数据(unSelectObject:[]) HTML <Alert show-icon v-show="openTip">                           已选择              

  • vue element table表格相同名称列合并方式

    目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"

  • Vue如何更改表格中的某一行选项值

    如何更改表格中的某一行选项值 结合后端接口,进行相应的传参 Id, state值等,因相关组件库中的方法说明比较简单,有些需要自己去尝试,如下图中change()方法的传参等 //ajax发送请求的相关方法: get : 获取 , post: 新增 , put/patch : 更改, delete: 删除 代码实现 组件库中的方法介绍: 接口示例: 效果: 对table某一行的数据进行编辑,删除,查看详情操作 效果图 在html中需要对button按钮进行template包裹,scope.row

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • Vue ELement Table技巧表格业务需求实战示例

    目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当

随机推荐