element-ui表格数据的应用

simon_chen 发布于2019-08-22 18:21 / 2686人阅读

摘要：需求原型需求对表格一列每行都添加一个按钮。整个表格每过自动刷新一次。后端返回数据的为的数据思路两个接口的数据。在获取的数据后，再遍历两个数据。根据对应的，合并到值再渲染到页面上。核心代码获取表格数据待刷新单次点击获取的数据

需求原型

需求：对表格date一列,每行都添加一个按钮。点击对应行的按钮，可以获取对应刷新的数据。展示在当前行。整个表格每过10s自动刷新一次。
后端返回数据：table的data为

    "a0": {
        "id": "#1",
        "log": "repair bug1",
    },
    "b2": {
        "id": "#2",
        "log": "repair bug2",
    }

date的数据

 "date": "2015-6-27"

思路：两个接口的数据。一个是整个table 的。一个是单条记录的。单条记录是合并到 table 里。
获取到date的值都存在一个数据里。在获取table的数据后，再遍历两个数据。根据对应的id，合并到值,再渲染到页面上。

核心代码：
获取table表格数据

 const date = "待刷新"
 for (let i in Datas) {
   let data = {
     id: Datas[i].id,
     log: Datas[i].log,
     date: date
   }
   this.dateDatas.forEach(item => {
     if (item.id === Datas[i].id) {
       data.date = item.date
     }
   })
  this.rbData.push(data)
 }

单次点击获取date的数据

this.rbData.forEach(item => {
  if (item.id === row.id) {
    row.date = date
  }
})
let dateData = {
  id: row.id,
  date: date
}
this.dateDatas.push(dateData)

GPU云服务器云服务器表格应用 html表格应用基础带数据的表格 element-ui

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95771.html

vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。

摘要：一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后，自动选中该行。单元格内数据样式单元格内按钮，可多个。触发组件绑定函数，参数按钮名称，按钮样式，按钮事件标识。单元格是否可点击的判断函数，可进行复杂的函数判断。 vue-bxz-table 一、封装element-ui的table组件：定义表格高度全屏增加前台分页功能。自定义表头，循环输出整体表结构。表格内编辑（输入框...

henry14 2019-08-26 13:30 评论0 收藏0
D2 Crud，一款简单易用的表格组件

摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改...

fevin 2019-08-23 11:43 评论0 收藏0
element-ui table表格动态列合并

摘要：前言的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看代码吧。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。前言 element-ui 1.0的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。2.0开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看...

isLishude 2019-08-23 10:35 评论0 收藏0
vue+element-ui实现行数可控的表格输入

摘要：的中使用包裹想要插入的，或者等元素，绑定一个的数组对象，在或者等元素使用，为该在绑定数组对象的对应属性这样就可以实现每一行的数据分别存储在绑定数组对象的不同下标数组中。新增一列时，只需要让绑定数组对象一个与先前属性一致的空对象进去。element的table中使用包裹想要插入的input，或者select等HTML元素，绑定一个的数组对象，在input或者select等HTML元...

番茄西红柿 2019-04-23 11:47 评论0 收藏0
VUE UI框架对比 element-ui 与 iView

摘要：而则是用到到指令结合的方式去生成，批量生成元素。表格操作列自定义渲染的时，使用的是的函数，直接在中插入对应模板表格分页都需要引入分页组件配合使用两者总体比较，要比简洁许多。 element VS iview(最近项目UI框架在选型，做了个分析，不带有任何利益相关）主要从以下几个方面来做对比使用率（npm 平均下载频率，组件数量，star, issue…)API风格打包优化与设计师友...

ZHAO_ 2019-08-20 17:25 评论0 收藏0