基于elementUI竖向表格、和并列的案例


Posted in Javascript onOctober 26, 2020

效果图如下

基于elementUI竖向表格、和并列的案例

代码

<template>
 <div>
  <section>
  <el-table
   :show-header="false"
   :data="tableData"
   :span-method="objectSpanMethod"
   border
   :cell-style="columnStyle"
   style="width: 100%; margin-top: 20px"
  >
   <el-table-column prop="id" label="ID" width="240">
   <template slot-scope="scope">
    <div>
    <img :src="scope.row.id|setPicUrl" />
    </div>
   </template>
   </el-table-column>
   <el-table-column width="180" prop="name"></el-table-column>
   <el-table-column prop="amount1"></el-table-column>
   <el-table-column width="180" prop="amount2"></el-table-column>
   <el-table-column prop="amount3"></el-table-column>
  </el-table>
  </section>
 </div>
</template>
<script>
export default {
 name: "mallMember-detail",
 data() {
 return {
 //请求回来的数据
  dataForm: {},
 };
 },
 computed: {
 //因为数据用到了dataform中的数据,所以写在了computed中
 tableData() {
  return [
  {
   id: this.dataForm.headImg,
   name: "用户ID",
   amount1: this.dataForm.id,
   amount2: "注册时间",
   amount3: this.dataForm.createDate
  },
  {
   id: this.dataForm.headImg,
   name: "微信昵称",
   amount1: this.dataForm.nickName,
   amount2: "手机号码",
   amount3: this.dataForm.phone
  },
  {
   id: this.dataForm.headImg,
   name: "会员名称",
   amount1: this.dataForm.gradeName,
   amount2: "会员等级",
   amount3: this.dataForm.gradeCode
  },
  {
   id: this.dataForm.headImg,
   name: "用户来源",
   amount1: this.dataForm.channel,
   amount2: "常住地",
   amount3:
   this.dataForm.provinceName +
   this.dataForm.cityName +
   this.dataForm.districtName
  }
  ];
 }
 },
 methods: {
 // 自定义列背景色
 columnStyle({ row, column, rowIndex, columnIndex }) {
  if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
  //第三第四列的背景色就改变了2和3都是列数的下标
  return "background:#f3f6fc;";
  }else{
  return "background:#ffffff;";
  }
 },
 // 和并列
 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
  if (rowIndex % 4 === 0) {
   return {
   rowspan: 4,
   colspan: 1
   };
  } else {
   return {
   rowspan: 0,
   colspan: 0
   };
  }
  }
 },
 }
};
</script>

补充知识:基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

需求图示如下,多级纵向动态表头表格:

基于elementUI竖向表格、和并列的案例

我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的、多级的、纵向的表头:

<template>
 <div>
 <!--按设备系统统计-->
 <div style="text-align:left">
  <h1>{{tableName}}</h1>
 </div>
 <!--纵向表格设计-->
 <el-row>
  <!--纵向表头设计-->
  <el-col :span="6">
  <el-row>
   <div :style="projectDivStyle">
   <p>项目名</p>
   </div>
  </el-row>
  <el-row v-if="ifAndroid">
   <el-col :span="12">
   <div :style="wordOfMouthAndroidDivStyle">
    <p>Android口碑指数</p>
   </div>
   </el-col>
   <el-col :span="12">
   <el-row v-for="(chl, i) in tableData.ratingChls"
     :key="i">
    <div :style="ratingSubDivStyle">
    <p>{{chl}}</p>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <el-row v-else>
   <div :style="wordOfMouthIOSDivStyle">
   <p>AppStore口碑指数</p>
   </div>
  </el-row>
  <el-row>
   <el-col :span="12">
   <div :style="ratingDivStyle">
    <p>评分</p>
   </div>
   </el-col>
   <el-col :span="12">
   <el-row v-for="(chl, i) in tableData.ratingChls"
     :key="i">
    <div :style="ratingSubDivStyle">
    <p>{{chl}}</p>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <el-row>
   <el-col :span="12">
   <div :style="rankDivStyle">
    <p>排名</p>
   </div>
   </el-col>
   <el-col :span="12">
   <el-row v-for="(chl,i) in tableData.rankChls"
     :key="i">
    <div :style="rankSubDivStyle">
    <p>{{chl}}</p>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <el-row>
   <div :style="topModuleDivStyle">
   <p>TOP3好评关键词</p>
   </div>
  </el-row>
  <el-row>
   <div :style="topModuleDivStyle">
   <p>TOP3差评关键词</p>
   </div>
  </el-row>
  </el-col>
  <!--纵列数据遍历-->
  <el-col :span="colSpan"
    v-for="(col,i) in tableData.cols"
    :key="i">
  <!--项目名数据-->
  <el-row>
   <div :style="projectDivStyle">
   <p>{{col.name}}</p>
   </div>
  </el-row>
  <!--口碑数据 区分Android和iOS视图显示逻辑-->
  <el-row v-if="ifAndroid">
   <el-col :span="24">
   <el-row v-for="(each, i) in col.wordOfMouth"
     :key="i">
    <div :style="ratingSubDivStyle">
    <p>
     {{each}}
    </p>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <el-row v-else>
   <div :style="wordOfMouthIOSDivStyle">
   <p>{{col.wordOfMouth[0]}}</p>
   </div>
  </el-row>
  <!--评分数据-->
  <el-row>
   <el-col :span="24">
   <el-row v-for="(each, i) in col.ratingInfo"
     :key="i">
    <div :style="ratingSubDivStyle">
    <p>
     {{each.info}}
    </p>
    <el-rate :value='Number(each.rating)'
       disabled
       show-score
       text-color="#ff9900"
       score-template="{value}">
    </el-rate>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <!--排名数据-->
  <el-row>
   <el-col :span="24">
   <el-row v-for="(each,i) in col.rankInfo"
     :key="i">
    <div :style="rankSubDivStyle">
    <p>{{each.rank}} {{each.info}}</p>
    </div>
   </el-row>
   </el-col>
  </el-row>
  <el-row>
   <div :style="topModuleDivStyle">
   <p v-for="(_module,i) in modules(col.topGoodModule)"
    :key="i">
    {{_module}}
   </p>
   </div>
  </el-row>
  <el-row>
   <div :style="topModuleDivStyle">
   <p v-for="(_module,i) in modules(col.topBadModule)"
    :key="i">
    {{_module}}
   </p>
   </div>
  </el-row>
  </el-col>
 </el-row>
 </div>
</template>
<style scoped>
/*
通过布局el-row来完成表格边界样式替代式设计
*/
.el-row {
 margin-bottom: 0px; /*去除el-row之间的间距*/
 border: 1px solid #e6e6e6;
 margin: -1px -1px -1px -1px; /*解决相邻边框重叠问题就靠这行代码*/
 &:last-child {
 margin-bottom: 0px;
 }
}
.bg-purple {
}
.bg-purple-light {
 background: #121927;
}
.grid-content {
 border: 0px solid rgb(0, 0, 0);
 min-height: 50px;
}
.grid-content-sub {
 border: 0px solid rgb(0, 0, 0);
 padding: 20px;
}
.grid-content-large {
 border: 0px solid rgb(0, 0, 0);
 padding: 70px;
 height: 60px;
}
.grid-content-large-sub {
 border: 0px solid rgb(0, 0, 0);
 padding: 20px;
 height: 57.5px;
}
</style>
<script>
import { getFeedbackCompetitorData } from '@/api/feedbacks'
import { EventBus } from '@/bus.js'
export default {
 data () {
 return {
  myProjectId: this.$route.query.feedbackProject,
  largeDivHeight: 120,
  smallDivHeight: 80,
  miniDivHeight: 50,
  ratingSubDivHeight: 80,
  rankSubDivHeight: 80,
  tableName: '',
  tableData: [],
  shadowCss: 'border-radius: 15px;box-shadow: 5px 5px 2px #888888',
  borderStyle: ''
 }
 },
 methods: {
 getFbCompetitorData () {
  getFeedbackCompetitorData(this.myProjectId).then(fbCpInfo => {
  this.tableName = fbCpInfo.competitorTable.tableName
  this.tableData = fbCpInfo.competitorTable.tableData
  })
 },
 modules (someArray) {
  var newArray = []
  for (var i = 0; i < someArray.length; i++) {
  var count = someArray[i]['cou']
  var word = someArray[i]['word']
  newArray.push(word + ':' + count)
  }
  return newArray
 }
 },
 computed: {
 ifAndroid: function () {
  if (this.tableData.wordOfMouthChls[0] === 'AppStore') {
  return false
  } else {
  return true
  }
 },
 colSpan: function () {
  var count = this.tableData.cols.length
  if (count > 5) {
  return 18 / count
  } else if (count < 4) {
  return 6
  }
 },
 commonDivStyle: function () {
  var height = this.smallDivHeight
  return `padding: 20px;height: ${height}px`
 },
 projectDivStyle: function () {
  var height = this.miniDivHeight
  return `background: #E8F8F5;padding: 20px;height: ${height}px`
 },
 wordOfMouthAndroidDivStyle: function () {
  var height = this.miniDivHeight
  return `margin-top:50%;padding: 20px;height: ${height}px`
 },
 wordOfMouthIOSDivStyle: function () {
  var height = this.miniDivHeight
  return `padding: 20px;height: ${height}px`
 },
 topModuleDivStyle: function () {
  var height = this.largeDivHeight
  return `padding: 20px;height: ${height}px`
 },
 ratingDivStyle: function () {
  var height = this.ratingSubDivHeight
  // 区分Android和iOS样式
  if (this.ifAndroid) {
  var margin = 'margin-top:50%'
  }
  return `${margin};padding: 20px;height: ${height}px`
 },
 ratingSubDivStyle: function () {
  var height = this.ratingSubDivHeight
  return `padding: 20px;height: ${height}px`
 },
 rankDivStyle: function () {
  var height = this.rankSubDivHeight
  return `margin-top:30%;padding: 20px;height: ${height}px`
 },
 rankSubDivStyle: function () {
  var height = this.rankSubDivHeight
  return `padding: 20px;height: ${height}px`
 }
 },
 created () {
 let _this = this
 EventBus.$on('projectId', projectId => {
  _this.myProjectId = projectId
 })
 },
 mounted () {
 this.getFbCompetitorData()
 },
 watch: {
 myProjectId: {
  immediate: false,
  handler: function (val) {
  this.getFbCompetitorData()
  }
 }
 }
}
</script>

实现图如下

基于elementUI竖向表格、和并列的案例

以上这篇基于elementUI竖向表格、和并列的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
Angularjs 基础入门
Dec 26 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
详解webpack babel的配置
Jan 09 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 #Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python实现微信远程控制电脑
2018/02/22 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
Jar包的作用是什么
2014/03/30 面试题
什么是索引指示器
2012/08/20 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
2014教师研修学习体会
2014/07/08 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
python实现简单聊天功能
2021/07/07 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python