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 通过base64实现图片下载功能
Dec 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 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循环获取GET和POST值的代码
2008/04/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python实现简单登陆系统
2018/10/18 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
房地产项目建议书
2014/03/12 职场文书
家长会主持词开场白
2014/03/18 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS