基于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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
vue.js响应式原理解析与实现
Jun 22 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
超清晰的document对象详解
2007/02/27 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python中的随机函数小结
2018/01/27 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python如何实现递归转非递归
2021/02/25 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
汽车专业毕业生推荐信
2013/11/12 职场文书
学校消防演习方案
2014/02/19 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
营销计划书
2015/01/17 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Nginx限流和黑名单配置
2022/05/20 Servers