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

君子坦荡荡,小人长戚戚

已于 2022-07-06 17:10:42 修改

阅读量9.5k

点赞数 5

文章标签： vue.js elementui 前端

于 2022-05-25 15:52:47 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67022380/article/details/124967189

版权

本文介绍如何利用 ElementUI 的 el-row 和 el-col 栅格布局组件创建横向表格。通过将对象数据转化为二维数组，实现了表格的展示。示例代码和最终效果展示，适合前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天用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="(item,index) in list" :key="index" class="table-col">
      <el-col v-for="(table,index2) in item" :key="index2" :span="24/item.length" class="table-item">
        <span class="label">{{ table.title }}</span>
        <span class="value">{{ table.value }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        [{ title: '姓名', value: '小大王' }, { title: '年龄', value: '17' }],
        [{ title: '性别', value: '--' }, { title: 'min号', value: '122255555' }],
        [{ title: '个人简介', value: '凑字-凑字-凑字-凑字' }]
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper{
    width: 100%;
    border: solid 1px #eaf2f8;
    .table-col:not(:last-child){
        border-bottom: solid 1px #eaf2f8;
    }
    .table-item:not(:last-child){
        border-right: solid 1px #eaf2f8;
    }
    .table-col{
      height: 100%;
      display: flex;
    }
    .table-item{
        height: 100%;
        display: flex;
        >div{
        display: flex;
        }
        .label{
            display: flex;
            align-items: center;
            width: 150px;
            text-align: left;
            background: #f2f9fc;
            color: #666;
            padding: 8px 12px;
        }
        .value{
            display: flex;
            align-items: center;
            word-wrap: break-word;
            color: #222;
            font-size: 14px;
            padding: 8px 12px;
            flex: 1;
        }
    }

}
</style>

希望能帮助你们 ^_^