园龄：3年7个月粉丝：32 关注：16

基于ElementUI实现竖排表格

ElementUI提供的基础表格效果如图

号
订单编号
202109221 2
订单类型
电话订望
订单动作

elementUI竖向表格、和并列_仙女的博客-CSDN博客

实现下图效果，其实就是四列表格，两列储存固定的标题，两列读取后端传过来的数据

后续：ElementUI 2.15.6版本提供了新的表格样式 “描述列表” 实现下图的效果易如反掌组件 | Element

订单基本信息
20210g2212
下望日
2021 一 09 一 22 224s40
电活订望
订望动作
支何
订望状态
已到货

界面布局代码如图

设定四个column标签，分别关联column1~4 为了美观其中1、3列可以设置一个宽度

VUE的属性如图

整个table绑定tableData1()

然后根据需要的行数，预设响应数量的数组，每个数组给出column1~4，其中1、3为固定值，2、4从后端取值

tableData1() {
return
column 1 : '
column2 :
this . orderDetai1s . orderNumber ,
column 3 : '
column4:
this . orderDetai1s . orderDate
column 1 : '
column2 :
this . orderDetai1s . orderType,
column 3 : '
column4:
this . orderDetai1s . orderAction
column 1 : '
column2 :
this . orderDetai1s . business Type,
column 3 : '
column4:
this . orderDetai1s . orderStatus
n;