美文网首页
vue:如何将一个对象渲染到一个表格中

vue:如何将一个对象渲染到一个表格中

作者: 别吵让我睡觉 | 来源:发表于2020-12-15 10:48 被阅读0次

问题所在:难点主要在表格绑定的数据:data必须是数组类型,虽然试过将对象直接push到表格绑定的数组对象中,然后再去渲染到表格。但是还会出现问题,主要原因是:

1:无法在html中灵活的得到对象中的键名、值名和分别对应的值
2:得到的键值对无法利用表格的prop绑定到表格中,但需注意以上问题主要原因是由于使用el-table所产生的限制条件

解决方法:可以用loadsh工具库,主要的思路是遍历对象中的每个键值对,然后将键值对提取出来封装到一个新对象中,再push进表格绑定的数组对象中。具体用法:

//安装依赖
npm install lodash
//在具体vue页面引入
import _ from 'lodash'
//遍历对象中的每个键值对
_.forEach({'a':1,'b':2},function (value,key) {
  console.log(key)
  console.log(value)
})
//举一个栗子
_.forEach(response.data.data,function (value,key) {
    let items={key:'',value:[]}
    items.key=key
    items.value=value
    this.rightTable.push(items)
})

相关文章

网友评论

      本文标题:vue:如何将一个对象渲染到一个表格中

      本文链接:https://www.haomeiwen.com/subject/rlgigktx.html