vue用ul写成table表格的样式

最新推荐文章于 2024-08-09 07:47:02 发布

zlting~

最新推荐文章于 2024-08-09 07:47:02 发布

阅读量1.8k

点赞数 2

分类专栏： VUE CSS样式

本文链接：https://blog.csdn.net/sunshineTing2/article/details/105368186

版权

本文介绍如何在Vue中利用ul元素实现类似表格的布局效果，包括数据处理、模板结构和CSS样式的设定。

摘要由CSDN通过智能技术生成

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

在这里插入图片描述

data数据

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

template页面

        <ul  class="organList">
          <li>
            <span>组织机构名称</span>
            <span>{
  {organList.name}}</span>
          </li>
          <li>
            <span>机构编码</span>
            <span>{
  {organList.code}}</span>
          </li>
          <li>
            <span>上级机构</span>
            <span>{
  {organList.higher}}</span>
          <