vue中表格如何横向排列,vue实现纵向渲染表格
本文主要介绍了在vue项目中实现垂直表的两种方法的思想分析。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面跟边肖学习。
问题描述
我们做项目的时候，经常用横排形式，但偶尔也会用竖排形式。例如，垂直表如下所示：
当我们看到这样的效果图，首先想到的是使用UI框架并修复。但是饿了么UI并没有直接提供这样的案例，有同学愿意用饿了么UI中el-table的合并行列来实现。其实这样做的话就麻烦了。例如，以下合并的行和列：
其实像这样的渲染，不一定要用UI组件。有时候你可以用本地的方式来做。会更方便。本文介绍了两种方法来实现这样一个简单的垂直表。实际场景可能更复杂，但还是那句话，只要你有想法，问题不大。做编程，关键是思考：
方式一（原生方式）不太推荐
思路是：自己画表格样式，用浮动的方式从左到右排列。
模板
div id=应用程序
ul class=proWrap
模板v-for=(item，index) in data
li class=proItem :key=index
span{{ item.title }}/span
span{{ item.value== ？待完善:item.value }}/span
/李
/模板
/ul
/div
/模板
脚本
导出默认值{
data() {
返回{
数据：[
{
标题：“重要性级别”，
值：“666”，
},
{
标题：“售前状态”，
值：“666”，
},
{
标题：“合作状态”，
值： ，
},
{
标题：“售前状态”，
值： ，
},
{
标题：“技术协议状态”，
值： ，
},
{
标题：“中标人”，
值： ，
},
{
标题：“合作状态”，
值： ，
},
{
标题：“有反馈时间”，
值： ，
},
],
};
},
方法：{}，
};
/脚本
style lang=less 范围
#app {
宽度：100%；
最小高度：100vh
框大小：边框-框；
填充：50px。专业包装
宽度：100%；
边框：1px实心# e9e9e9
右边框：0；
底部边框：0；
//每行放几个组，这里的几个除外。项目
宽度：100%/3；
浮动：左；//向左浮动，
跨度{
显示：内嵌-块；
宽度：calc(50%-2px)；
高度：50px
行高：50px
文本对齐：居中；
border-right:1px solid # e9e 9e 9；
border-bottom:1px solid # e9e 9e 9；
}
span:第n个孩子(1) {
背景：# fafafa
}
}
//清除浮动，不清除会导致最左边的边框消失。
*在{
内容：“”；
显示：块；
明确：两者都有；
}
}
}
//删除李的默认样式
李{
list-style-type:无；
}
/风格
方式二（使用栅格布局组件）推荐
用饿了么自带的网格系统会更方便。如果我们控制el-col的：span属性，我们可以设置每行出现多少个组，如果有更多，我们将自动换行。至于表单样式，我们可以自己设置。这个方法很简单。附加代码：
模板
div id=应用程序
El-col:span= how width v-for=(item，index) in tableArr :key=index
div class=box
div class= content 1 { { item . key } }/div
div class= content 2 { { item . value== ？待完善:item.value }}/div
/div
/el-col
/div
/模板
脚本
导出默认值{
data() {
返回{
tableArr: [
{
关键字：“名称”，
价值：‘美猴王’，
},
{
关键字：“年龄”，
价值：500，
},
{
键： 身高，
值： 山一样高，
},
{
键： 性别，
值： 男，
},
{
键： 住址，
值： 花果山水帘洞，
},
{
键： 学历，
值： 天庭弼马温学历，
},
{
键： 能力，
值： 强，
},
{
键： 外号，
值： 齐天大圣，
},
],
宽度：8,
};
},
方法：{},
};
/脚本
style lang=less 范围
#app {
宽度：100%;
最小高度：100vh
框大小：边框-框；
填充：50px。方框{
宽度：100%;
高度：40px
显示器：flex
border-left:1px solid # e9e 9e 9；
border-top:1px solid # e9e 9e 9；内容1 {
宽度：40%;
高度：40px
行高：40px
文本对齐：居中；
背景色：# fafafa
border-right:1px solid # e9e 9e 9；
border-bottom:1px solid # e9e 9e 9；
颜色：# 333;
字体大小：14px
}。内容2 {
宽度：60%;
高度：40px
行高：40px
文本对齐：居中；
背景色：# fff
border-right:1px solid # e9e 9e 9；
border-bottom:1px solid # e9e 9e 9；
颜色：# b0b0b2
字体大小：14px
}
}
}
/风格
到此这篇关于某视频剪辑软件项目两种方式实现竖向表格的思路分析的文章就介绍到这了，更多相关某视频剪辑软件竖向表格内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。