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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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常用ODBC函数集(详细)
2013/06/24 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
简单实现python数独游戏
2018/03/30 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
竞聘上岗演讲
2014/05/19 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
授权委托书协议书
2014/10/16 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
2016银行求职自荐信
2016/01/28 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js