网站调用网页内容,室内设计方案讲解思路,安卓网站客户端制作,网络营销师怎么考演示效果#xff1a; 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建:
页面效果#xff1a;
代码分析:
上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16
下面混合table实现#xff0c;并使用border来自适应宽度…演示效果 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建:
页面效果
代码分析:
上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16
下面混合table实现并使用border来自适应宽度height280来控制表格高度即使表格数据只有一条也可以占位提升表格效果
templateel-dialog titlexxx资料 :visible.syncopen :close-on-click-modalfalse closecancel width840pxappend-to-bodyel-form refform :modeldataForm label-width90pxel-rowel-col :span8el-form-item label名称{{ dataForm.xxx}}/el-form-item/el-colel-col :span8el-form-item label电话{{ dataForm.xxx}}/el-form-item/el-colel-col :span8el-form-item label性别{{ dataForm.sex }}/el-form-item/el-col/el-rowel-rowel-col :span8el-form-item label年龄{{ dataForm.age }}/el-form-item/el-colel-col :span16el-form-item labelxxx{{ dataForm.xxx}}/el-form-item/el-col/el-row/el-formel-table :dataxxxArr border height280el-table-column propxxx labelxxx aligncenter/el-table-column propxxx labelxxx aligncenter/el-table-column propxxx labelxxx aligncenter/el-table-column propxxx labelxxx aligncenter/el-table-column propxxx labelxxx aligncenter//el-tablediv slotfooter classdialog-footerel-button clickcancel取 消/el-button/div/el-dialog
/template
