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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
vue3中的组件间通信
vue前端工程的搭建
You might like
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php多线程并发实现方法
2016/09/30 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
vue组件的写法汇总
2018/04/12 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
如何基于js判断浏览器版本
2020/02/20 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python连接字符串的方法小结
2015/07/13 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
个人找工作的自我评价
2013/10/17 职场文书
小学语文教学反思
2014/02/10 职场文书
学生期末评语大全
2014/04/30 职场文书
技术比武方案
2014/05/19 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
初婚初育证明范本
2014/11/24 职场文书
介绍信怎么写
2015/05/05 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
python中如何对多变量连续赋值
2021/06/03 Python