vue项目两种方式实现竖向表格的思路分析


Posted in Vue.js onApril 28, 2021

问题描述

在我们做项目中,常见的是横向表格,但是偶尔的需求,也会做竖向的表格。比如下图这样的竖向表格:

vue项目两种方式实现竖向表格的思路分析

我们看到这样的效果图,第一时间想到的是使用UI框架,改一改搞定。但是饿了么UI并没有直接提供这样的案例,部分同学会想着使用饿了么UI中的el-table的合并行、合并列的方式去实现,其实如果这样去做的话,反而做麻烦了。比如下面的合并行合并列:

vue项目两种方式实现竖向表格的思路分析

类似于这样的效果图,其实并不一定非得使用UI组件,有的时候使用原生的方式去做。反而会更方便。本文介绍两种方式去实现这样的简单的竖向表格。实际场景中可能会更加复杂,但是还是那句话,只要有思路,就不是大问题。做编程,关键是思路:

方式一(原生方式)不太推荐

思路就是:表格样式自己画,使用浮动从左往右依次排开

<template>
  <div id="app">
    <ul class="proWrap">
      <template v-for="(item, index) in data">
        <li class="proItem" :key="index">
          <span>{{ item.title }}</span>
          <span>{{ item.value == "" ? "待完善" : item.value }}</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          title: "重要级别",
          value: "666",
        },
        {
          title: "售前状态",
          value: "666",
        },
        {
          title: "配合状态",
          value: "",
        },
        {
          title: "售前状态",
          value: "",
        },
        {
          title: "技术协议状态",
          value: "",
        },
        {
          title: "中标厂家",
          value: "",
        },
        {
          title: "配合状态",
          value: "",
        },
        {
          title: "配合反馈时间",
          value: "",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .proWrap {
    width: 100%;
    border: 1px solid #e9e9e9;
    border-right: 0;
    border-bottom: 0;
    // 每行放几组,这里就除于几
    .proItem {
      width: 100% / 3;
      float: left; // 向左浮动,
      span {
        display: inline-block;
        width: calc(50% - 2px);
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
      }
      span:nth-child(1) {
        background: #fafafa;
      }
    }
    // 清除浮动,不清除会导致最左侧的边框消失
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
// 去掉li的默认样式
li {
  list-style-type: none;
}
</style>

方式二(使用栅格布局组件)推荐

使用饿了么自带的栅格系统会方便一些,我们可以如果通过控制el-col的:span属性来设置每行出现几组,多了就自动换行。至于表格的样式,我们自己设置即可。这种方式很简单。代码附上:

<template>
  <div id="app">
    <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
      <div class="box">
        <div class="content1">{{ item.key }}</div>
        <div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableArr: [
        {
          key: "姓名",
          value: "孙悟空",
        },
        {
          key: "年龄",
          value: 500,
        },
        {
          key: "身高",
          value: "山一样高",
        },
        {
          key: "性别",
          value: "男",
        },
        {
          key: "住址",
          value: "花果山水帘洞",
        },
        {
          key: "学历",
          value: "天庭弼马温学历",
        },
        {
          key: "能力",
          value: "强",
        },
        {
          key: "外号",
          value: "齐天大圣",
        },
      ],
      howWidth: 8,
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .box {
    width: 100%;
    height: 40px;
    display: flex;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    .content1 {
      width: 40%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fafafa;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 14px;
    }
    .content2 {
      width: 60%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #b0b0b2;
      font-size: 14px;
    }
  }
}
</style>

到此这篇关于vue项目两种方式实现竖向表格的思路分析 的文章就介绍到这了,更多相关vue 竖向表格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
vue组件通信传值操作示例
2019/01/08 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
浅析Python多线程下的变量问题
2015/04/28 Python
python 全文检索引擎详解
2017/04/25 Python
Python实现excel转sqlite的方法
2017/07/17 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Pycharm安装python库的方法
2020/11/24 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
董事长秘书职责
2014/01/31 职场文书
教师读书活动总结
2014/05/07 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
MySQL笔记 —SQL运算符
2022/01/18 MySQL
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS