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="(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>

希望能帮助你们 ^_^

vue 横向表格 (el-row,el-col)栅格布局相关推荐

html 栅格表单,col 栅格布局
## col 栅格布局规则 ### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top) **所有组件均支持布局配置规则,详细参考**[iview栅格 ...
[vue] 说说你对选项el,template,render的理解
[vue] 说说你对选项el,template,render的理解 el: 把当前实例挂载在元素上 template: 实例模版, 可以是.vue中的template, 也可以是template选项, ...
从零学习Vue - 02模板语法、el与data两种写法、mvvm模型、数据代理
root容器里的代码被称为模板,有了模板会有特殊的模板语法.Vue模板中语法有两大类,一类是插值语法,另一类是指令语法. 插值语法功能:用于解析标签体内容.写法:{{xxx}},xxx为js表达式, ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
vue实现表格单元格的拆分、合并
在之前的项目中,我接到一个需求,需要一个类似excel的表格合并和拆分的需求. 目前我自己初步实现是这样子的我们的项目是前后分离的,后端用的是.net,前端用的是vue,得到这个需求之后,我的第一反 ...
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
vue校验表格数据_如何通过数据验证限制Google表格中的数据
vue校验表格数据 If you use Google Sheets to collaborate with others, you can prevent people from typing th ...
bootstrap4 横向表格
bootstrap4 横向表格页面代码效果图如下代码如下 <!DOCTYPE html> <html lang="en" xmlns:th="ht ...
VUE iView之栅格布局响应式布局
栅格布局: 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用方法如下: ...

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

vue 横向表格 (el-row,el-col)栅格布局相关推荐

最新文章

热门文章