基于ElementUI实现竖排表格

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

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

 

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

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

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

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

 

界面布局代码如图

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

-table : show-header= "false " : data: "tableData1 " border style= "width: < el -table- column < el -table-column < el-table-column < el-table-column el -table) 100% ; label "a' label— "b" label "c' label— " d" margin-top: 20px " width = " 100px " " column2 prop= width = " 100px" " column4 prop= prop= " columnl " / el -table - column > -table-column > prop= " column3 " / el -table - column > -table-column >

 

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;

posted @ 2021-10-05 00:02  夏·舍  阅读(3580)  评论(0)  编辑  收藏  举报