vue 横向表格 (el-row,el-col)栅格布局

今天用ui库的 栅格布局(el-row,el-col) 简单写个横向表格

横向表格一般都是展示某个 对象(Object) 的数据而, 这时候我们要把对象转化成 数组(Array)

当然拉我是手动转换的, 大家也可以封装方法  ^_^

最终效果

原数据

{
      name: '小王',
      age: '12',
      sex: '男',
      min: '909886',
      bag: '凑字-凑字-凑字-凑字'
};

转化成数组(二维数组)

[
    [{ title: '姓名', value: obj.name }, { title: '年龄', value: obj.age }],
    [{ title: '性别', value: obj.sex }, { title: 'min号', value: obj.min }],
    [{ title: '个人简介', value: obj.bag }]
]

全部代码()

<template>
  <div class="wrapper">
    <el-row v-for=