使用Vue和ul实现类表格布局的详细方法与技巧

用ul写出类似table表格的样式

data数据

organList &＃61; {name: &＃39;安全委员会&＃39;,code: &＃39;awh20200215&＃39;,higher: &＃39;柏科管理公司&＃39;,duty: [&＃39;1.第一&＃39;,&＃39;2.第二&＃39;],person: &＃39;张三&＃39;,phone: &＃39;18701966666&＃39;
};

template页面

• 组织机构名称{{organList.name}}
• 机构编码{{organList.code}}
• 上级机构{{organList.higher}}
• 机构职责{{item}}
• 联系人{{organList.person}}
• 电话{{organList.phone}}

css样式

.organList {margin: 0;padding: 0;li{list-style: none;border: 1px solid #DCDFE6;span{ padding: 15px; color: #555;}span:first-child{display: inline-block;width: 200px;font-weight: 900;border-right: 1px solid #DCDFE6;}}li &＃43; li{ border-top: none;}li:first-child{ border-radius: 4px 4px 0 0;}li:last-child{ border-radius: 0 0 4px 4px;}}