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下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue的项目如何打包上线
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读取IMAP邮件
2006/10/09 PHP
PHP完整的日历类(CLASS)
2006/11/27 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
js控制表单操作的常用代码小结
2013/08/15 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python中删除某个元素的方法解析
2019/11/05 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
工程安全员岗位职责
2014/03/09 职场文书
利群广告词
2014/03/20 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
检察院起诉意见书
2015/05/20 职场文书
观后感开头
2015/06/19 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript