合作网站登录制作,wordpress论坛功能,西安外包公司有哪些,深圳网页制作招聘网最近在做电商类型的官网#xff0c;希望实现的布局如下#xff1a;有表头和表身#xff0c;所以我首先想到的就是table表格组件。 表格组件中常见的就是#xff1a;标题和内容一一对应#xff1a; 像效果图中的效果#xff0c;只用基础的表格布局是不行的#xff0c;因…最近在做电商类型的官网希望实现的布局如下有表头和表身所以我首先想到的就是table表格组件。 表格组件中常见的就是标题和内容一一对应 像效果图中的效果只用基础的表格布局是不行的因此我想到了table表格中的展开功能 然后通过默认展开所有行 然后在里面的表格table中默认隐藏表头 其他的则需要通过样式进行实现了
element-ui中table表格的嵌套代码部分 el-table v-bind:datatableData :default-expand-alltrue classparentTablerefmultipleTablev-loadingloadingelement-loading-text拼命加载中el-table-column typeexpandtemplate slot-scopepropsdiv classconWrap styletext-align: left;line-height: 16px;font-size: 14px;position: relative;top: -10px;span订单包号{{props.row.OrderNo}}/spanspan stylemargin-left:42px;付款时间{{props.row.CreateTime}}/span/divel-table v-bind:dataprops.row.OrderDetails :default-expand-alltrue stripe :show-headerfalse classchildTableel-table-column propPartNo aligncenterlabel产品型号width180template slot-scopescopediv classname-b{{scope.row.PartNo}}/div/template/el-table-columnel-table-column propMfglabel品牌 width199template slot-scopescopediv classname-b{{scope.row.Mfg}}/div/template/el-table-columnel-table-column propPackagelabel封装 width114template slot-scopescopediv classname-b{{scope.row.Package}}/div/template/el-table-columnel-table-column propmiaoshulabel描述 width300template slot-scopescopediv classname-b stylewidth:100%;72MHZ 20KB 37 2V~3.6V-40°C~85°CTA/div/template/el-table-columnel-table-column propProductNum aligncenter width120label申请数量template slot-scopescopediv classname-b{{scope.row.ProductNum}}/div/template/el-table-columnel-table-column propmaxNumlabel申请状态template slot-scopescopedivel-popover triggerhover placementright v-ifscope.row.State20||scope.row.State40p v-ifscope.row.State20失败原因: {{ scope.row.FailReason }}/pp v-ifscope.row.State40物流信息: {{ scope.row.ExpressNo }}/pdiv slotreference classname-wrapper{{scope.row.State |fiterState(stateMenu)}}span v-ifscope.row.State40 stylemargin-left:14px;color:#B77C20;物流信息/spanspan v-ifscope.row.State20 stylemargin-left:14px;color:#B77C20;查看原因/span/div/el-popoverdiv v-else{{scope.row.State |fiterState(stateMenu)}}/div/div/template/el-table-columnel-table-column label操作 width162template slot-scopescopediv styledisplay:flex;el-button typetext sizesmall v-on:clickcancel(scope.row) v-ifscope.row.State10||scope.row.State20取消/el-buttonel-button typetext sizesmall v-on:clicksureHave(scope.row) v-ifscope.row.State40确认收货/el-button/div/template/el-table-column/el-table/template/el-table-columnel-table-column label产品型号 aligncenter width180/el-table-columnel-table-column label品牌 width199/el-table-columnel-table-column label封装 width114/el-table-columnel-table-column label描述 width300/el-table-columnel-table-column label申请数量 aligncenter width120/el-table-columnel-table-column label申请状态/el-table-columnel-table-column label操作 aligncenter width118/el-table-column
/el-table最终效果图
样式部分
.el-table {border-top: none !important;}.el-table__expanded-cell {padding: 0 !important;}.tableWrap {width: 100%;}.el-tabs__nav-scroll {padding: 0 20px;box-sizing: border-box;}.tableWrap .el-table {width: 1240px;margin: 0 auto;}.el-icon.el-icon-arrow-right {color: #fff;}.el-table__row.expanded {background: #fff !important;position: relative !important;top: -100px !important;border: 1px solid red;}.el-tabs__content {display: none;}.el-table__row.expanded td {padding: 7px 0;}.el-table__row.expanded {border: 1px solid #E5E5E5;}.el-table__row.expanded:first-child {border-bottom: none;}.childTable .el-table__body {border-top: 1px solid #E5E5E5;}.childTable .el-table__row.expanded td:first-child {border-left: 1px solid #E5E5E5;}.childTable .el-table__row.expanded td:last-child {border-right: 1px solid #E5E5E5;}.el-tabs__header.is-top {border-bottom: none;}.childTable .el-table__header-wrapper {display: none;}.conWrap {height: 44px;background: #E5E5E5;line-height: 44px;padding-left: 10px;font-size: 14px;font-family: Microsoft YaHei;line-height: 19px;color: #333333;}.conWrap span {line-height: 44px;}.el-table .has-gutter .is-leaf {position: relative !important;left: -48px !important;}.el-table .has-gutter .is-leaf:last-child {position: relative !important;left: 0px !important;}.el-table__header-wrapper {background: #EBEBEB;}.el-table .has-gutter tr th {background: #EBEBEB;font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;line-height: 19px;color: #333333;}
数据结构
{Items:[{OrderNo:ICS-10390-1,ProductIds:[646,309118,331385,331393,331394],UserId:10390,Applicant:(▽*)b,ApplicantMobile:18458192430,Receiver:123,CompanyName:卡卡卡卡卡12 32 26,Post:高管,Industry:工业设计,Purpose:332,Province:广东省,City:广州市,Address:123,ContactMobile:18458192430,CreateTime:2021/9/7 8:51,OrderDetails:[{Id:1309,OrderNo:ICS-10390-1,SupplierId:2,ProductId:331393,ProductNum:1,ExpressNo:null,SendTime:,ReceiveTime:,JpSkuNo:JPC47B1332N331393,PartNo:cs-454,Package:21,Mfg:Samsung(三星),ProPics:https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//IcMall/icmall/2021/4/30/2021043014452714515931.JPG,CreateTime:2021/9/7 8:51,UpdateTime:2021/9/7 8:51,IsDeleted:false,State:10,CheckTime:null,FailReason:null,SupplierName:深圳前海宝利士科技有限公司,ExpressCompany:null,Ship:1}]}],Queryable:null,TotalCount:1,Msg:null
}
