Vue 实现排名及单元格多数据展示

最新推荐文章于 2024-05-24 08:00:57 发布

石页的橙橙

最新推荐文章于 2024-05-24 08:00:57 发布

阅读量4k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/A15511052336/article/details/120765485

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue 实现排名及单元格多数据展示

本次需求为：在上篇自己搭建的vue环境下，将数据进行排名展示，且各个单元格含有多个数据文本

实现效果如下图所示：在这里插入图片描述

前端代码如下：

<template>
    <el-tabs type="border-card">
      <el-tab-pane label="播放数据详情">
        <el-select v-model="time" placeholder="请选择时间" style="width:200px;margin: 20px">
          <el-option v-for="item in timeType" :key="item" :label="item" :value="item" />
        </el-select>
        <el-select v-model="program" placeholder="请选择节目类型" style="width:200px;margin: 20px">
          <el-option v-for="item in programType" :key="item" :label="item" :value="item" />
        </el-select>
        <el-select v-model="topRank" placeholder="请选择Top" style="width:200px;margin: 20px">
          <el-option v-for="item in TopSelect" :key="item" :label="item" :value="item" />
        </el-select>
        <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }">
          <el-table-column  type="index" align="center" :resizable="false" label="排名" width="100">
            <template slot-scope="scope" style="position: relative; width: 160px; height: 80px;">
              <span v-if="scope.$index+1 == 1">{{topRank}}</span>
              <span v-else-if="scope.$index+1 == 2">
                <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon>
                <span style="position: relative;left: -37px;bottom: 25px;color: brown;size: 60px;font-weight: bolder">1</span>
              </span>
              <span v-else-if="scope.$index+1 == 3">
                <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon>
                <span style="position: relative;left: -37px;bottom: 25px;color: brown;size: 60px;font-weight: bolder">2</span>
              </span>
              <span v-else-if="scope.$index+1 == 4">
                <svg-icon icon-class="排行榜" style="width: 60px; height: 60px"></svg-icon>
                <span style="position: relative;left: -37px;bottom: 25px;color: brown;size: 60px;font-weight: bolder">3</span>
              </span>
              <span v-else >
                <svg-icon icon-class="排行榜grey" style="width: 55px; height: 53px"></svg-icon>
                <span style="position: relative;left: -35px;bottom: 27px;color: brown;size: 60px;font-weight: bolder">{{scope.$index}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column v-for="(item,key) in columnDate" width="180" :key="item" :prop="item" :label="item" align="left">
            <template slot="header">
              <span style="font-weight: bold">{{columnDate[key]}}</span>
              <span v-if="columnDateType[key] === '工作日'" style="border-color: #409EFF;color: #409EFF;border-style: solid;border-width: thin">{{columnDateType[key]}}</span>
              <span v-if="columnDateType[key] === '双休日'" style="border-color: #13ce66;color: #13ce66;border-style: solid;border-width: thin">{{columnDateType[key]}}</span>
            </template>
            <template slot-scope="scope">
              <div align="left">
                <span v-if="scope.row[`${item}`] instanceof Array">
                <span style="text-align: justify">{{ scope.row[`${item}`][0] }}</span>
                <br>
                <span>{{ scope.row[`${item}`][1] }}</span>
                <span>&#8194;</span>
                <span v-if="scope.row[`${item}`][2].includes('-')" style="color: lightgreen">{{ scope.row[`${item}`][2] }}</span>
                <span v-else-if="scope.row[`${item}`][2] === '0.00%'" style="color: #1890ff">{{ scope.row[`${item}`][2] }}</span>
                <span v-else style="color: red">{{ scope.row[`${item}`][2] }}</span>
                <span>&#8194;</span>
                <span v-if="scope.row[`${item}`][2].includes('-')">
                  <svg-icon icon-class="箭头_向下"></svg-icon>
                </span>
                <span v-else-if="scope.row[`${item}`][2] === '0.00%'">
                  <svg-icon icon-class="横线"></svg-icon>
                </span>
                <span v-else>
                  <svg-icon icon-class="箭头_向上"></svg-icon>
                </span>
              </span>
                <span v-else>
                <span>{{ scope.row[`${item}`] }}</span>
              </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
  name: 'vuetest',
  data() {
    return {
      time: '',
      program: '',
      topRank: '',
      timeType: ['日','周','月'],
      programType: ['全部','电影','电视剧','综艺'],
      TopSelect: ['Top10','Top100'],
      columnDate: ['09-16','09-15','09-14','09-13','09-12','09-11','09-10'],
      columnDateType: ['工作日','工作日','工作日','工作日','双休日','双休日','工作日'],
      emptyData: [''],
      tableData: [{
        '09-16':'90.9%',
        '09-15':'90.34%',
        '09-14':'90.14%',
        '09-13':'90.11%',
        '09-12':'89.22%',
        '09-11':'90.59%',
        '09-10':'90.84%'
      },{
        '09-16':['开心锤锤',19222,'-1.27%'],
        '09-15':['开心锤锤',19469,'-6.51%'],
        '09-14':['开心锤锤',20825,'-6.56%'],
        '09-13':['开心锤锤',22288,'-39.88%'],
        '09-12':['开心锤锤',37075,'-8.58%'],
        '09-11':['开心锤锤',40555,'19.67%'],
        '09-10':['开心锤锤',33888,'0.00%']
      },{
        '09-16':['一生一世',6605,'27.86%'],
        '09-15':['宇宙护卫队之钢甲霸王龙',6231,'-4.64%'],
        '09-14':['小猪佩奇第二季',8137,'-27.25%'],
        '09-13':['小猪佩奇第二季',11185,'-28.92%'],
        '09-12':['小猪佩奇第二季',15736,'-3.54%'],
        '09-11':['白蛇2',17782,'42.53%'],
        '09-10':['宇宙护卫队之钢甲霸王龙',13046,'0.00%']
      },{
        '09-16':['代号山豹',6140,'14.89%'],
        '09-15':['小猪佩奇第二季',5576,'-31.47%'],
        '09-14':['宇宙护卫队之钢甲霸王龙',6534,'-22.24%'],
        '09-13':['宇宙护卫队之钢甲霸王龙',8403,'-44.49%'],
        '09-12':['宇宙护卫队之钢甲霸王龙',15138,'-12.68%'],
        '09-11':['宇宙护卫队之钢甲霸王龙',17337,'32.89%'],
        '09-10':['小猪佩奇第二季',12992,'0.00%']
      },{
        '09-16':['宇宙护卫队之钢甲霸王龙',5925,'-4.91%'],
        '09-15':['代号山豹',5313,'29.59%'],
        '09-14':['白蛇2',5163,'15.09%'],
        '09-13':['一生一世',5331,'-34.05%'],
        '09-12':['白蛇2',12104,'-31.93%'],
        '09-11':['小猪佩奇第二季',16313,'25.56%'],
        '09-10':['白蛇2',12476,'0.00%']
    },{
        '09-16':['小猪佩奇第二季',5137,'-7.87%'],
        '09-15':['一生一世',5166,'0.96%'],
        '09-14':['一生一世',5117,'-4.01%'],
        '09-13':['叫我僵小鱼',5239,'-35.43%'],
        '09-12':['新大头儿子小头爸爸',8298,'-24.65%'],
        '09-11':['新大头儿子小头爸爸',11012,'46.61%'],
        '09-10':['周生如故',8182,'0.00%']
      }
      ]
    }
  },
  methods: {

  }
}
</script>

对我等前端小白而言，本次的难点在于：

排行展示：排行图标可以使用scope.$index进行判断
表头及单元格的自定义展示：即表头和单元格涵盖多个数据文本，可以通过和实现，这也就解决了在el-table-column中使用v-for进行字段取值的困难
表头及单元格左对齐：不可直接在span标签或者template标签上加以限制，应在块级元素div上进行限制，即嵌套在div标签里，并加入align="left"即可

在根据上一篇新建vue环境进行本次开发时，有如下注意事项：

vue组件的使用
在新的环境下是不能直接使用el-table诸如此类组件的，需要进行如下配置：
在main.js中加入：

import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(ElementUI, { locale })

这样即可使用组件

引用icon
这里参照文章 Vue项目中使用iconfont中的svg图标逐步操作即可
组件显示问题
新建项目按照上述配置补充后，展示是不带有正确样式的，如下图所示

因此，需要在main.js中加入如下配置

import 'element-ui/lib/theme-chalk/index.css'

加上该配置之后即可实现显示正常面板

石页的橙橙

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Vue 实现排名及单元格多数据展示

Vue 实现排名及单元格多数据展示本次需求为：在上篇自己搭建的vue环境下，将数据进行排名展示，且各个单元格含有多个数据文本前端代码如下：<template> <el-tabs type="border-card"> <el-tab-pane label="播放数据详情"> <el-select v-model="time" placeholder="请选择时间" style="width:200px;margin: 20p
复制链接

扫一扫