vue elementui el-table 表格里边展示四分位图效果(功能实现)

 更新时间:2024年04月27日 11:32:47   作者:盐多碧咸。。  
这篇文章主要介绍了vue elementui el-table 表格里边展示四分位图效果(功能实现),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

vue elementui el-table 表格里边展示四分位图

直接上代码(效果图在文章末尾):

父组件:

<template>
<el-table 
      size="small"
      :header-cell-style="headerCellStyle()"
      style="width: 100%;"
      highlight-current-row
      row-key="index"
      :data="tableData1" 
      >
      <el-table-column
        label="标题1"
        prop="name1"
        align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.name1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据1"
        prop="value1"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.name1 === '指标4'">
            <quartileChart :quartile="scope.row.value1"></quartileChart>
          </div>
          <span v-else>{{ scope.row.value1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据2"
        prop="value2"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.name1 === '指标4'">
            <quartileChart :quartile="scope.row.value2"></quartileChart>
          </div>
          <span v-else>{{ scope.row.value2}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据3"
        prop="value3"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.name1 === '指标4'">
            <quartileChart :quartile="scope.row.value3"></quartileChart>
          </div>
          <span v-else>{{ scope.row.value3}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据4"
        prop="value4"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.name1 === '指标4'">
            <quartileChart :quartile="scope.row.value4"></quartileChart>
          </div>
          <span v-else>{{ scope.row.value4}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据5"
        prop="value5"
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.name1 === '指标4'">
            <quartileChart :quartile="scope.row.value5"></quartileChart>
          </div>
          <span v-else>{{ scope.row.value5}}</span>
        </template>
      </el-table-column>
    </el-table>
</template>
<script>
import quartileChart from '@/components/quartileChart.vue' // 引入子组件(四分位图),注意引入路径
export default {
components: { quartileChart },
  data() {
    return {
    	tableData1: [
        {
          name1: '指标1',
          value1: '0.33%', 
          value2: '0.33%', 
          value3: '0.33%', 
          value4: '0.33%', 
          value5: '0.33%', 
        },
        {
          name1: '指标2',
          value1: '0.33%', 
          value2: '0.33%', 
          value3: '0.33%', 
          value4: '0.33%', 
          value5: '0.33%', 
        },
        {
          name1: '指标3',
          value1: '0.33%', 
          value2: '0.33%', 
          value3: '0.33%', 
          value4: '0.33%', 
          value5: '0.33%', 
        },
        {
          name1: '指标4',
          value1: '1', 
          value2: '2', 
          value3: '3', 
          value4: '4', 
          value5: null, 
        }
      ]
    },
    methods: {
      headerCellStyle () {
       return {
        color: " #333 !important", 
        backgroundColor: "#cedff3  !important",
        fontSize: '14px',
        fontWeight: 500,
       }
      },
    }
  }
}
</script>

子组件:

<template>
  <div>
    <div v-if="5 - Number(quartile) === 1" class="ranking rank_1">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
    </div>
    <div v-else-if="5 - Number(quartile) === 2" class="ranking rank_2">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
    </div>
    <div v-else-if="5 - Number(quartile) === 3" class="ranking rank_3">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
    </div>
    <div v-else-if="5 - Number(quartile) === 4" class="ranking rank_4">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
    </div>
    <div v-else class="ranking rank_5">
      <div class="r4"></div>
      <div class="r3"></div>
      <div class="r2"></div>
      <div class="r1"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'quartileChart',
  components: {},
  props: {
    quartile: {
      type: String,
    }
  },
  data () {
    return {
    }
  },
  created () {},
  mounted () {},
  computed: {},
  watch: {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.ranking{
  width: 47px;
  margin: 0 auto;
  height: 39px;
  margin-top: 1px;
  margin-bottom: 2px;
  div {
    height: 9px;
    zoom: 1;
    overflow: hidden;
    border: 1px solid #dcdcdc;
    margin-top: -1px;
  }
}
.rank_1 { 
  .r4 {
    height: 11px;
  }
  .r3 {
    height: 11px;
  }
  .r2 {
    height: 11px;
  }
  .r1 {
    border: 0;
    background: #e1edfc;
    height: 11px;
  }
}
.rank_2 { 
  .r4 {
    height: 11px;
  }
  .r3 {
    height: 11px;
  }
  .r2 {
    border: 0;
    background: #cbdff8;
    height: 11px;
  }
  .r1 {
    border: 0;
    background: #e1edfc;
    height: 11px;
  }
}
.rank_3 { 
  .r4 {
    height: 11px;
  }
  .r3 {
    border: 0;
    background: #b3ceef;
    height: 11px;
  }
  .r2 {
    border: 0;
    background: #cbdff8;
    height: 11px;
  }
  .r1 {
    border: 0;
    background: #e1edfc;
    height: 11px;
  }
}
.rank_4 { 
  .r4 {
    border: 0;
    background: #94b7e3;
    height: 11px;
  }
  .r3 {
    border: 0;
    background: #b3ceef;
    height: 11px;
  }
  .r2 {
    border: 0;
    background: #cbdff8;
    height: 11px;
  }
  .r1 {
    border: 0;
    background: #e1edfc;
    height: 11px;
  }
}
.rank_5 { 
  .r4 {
    height: 11px;
  }
  .r3 {
    height: 11px;
  }
  .r2 {
    height: 11px;
  }
  .r1 {
    height: 11px;
  }
}
</style>

展示效果图:

在这里插入图片描述

到此这篇关于vue elementui el-table 表格里边展示四分位图的文章就介绍到这了,更多相关vue elementui el-table 四分位图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中,这篇文章主要介绍了Vue中的侦听器watch,需要的朋友可以参考下
    2022-10-10
  • Vue中Vue router和axios的封装使用教程

    Vue中Vue router和axios的封装使用教程

    当用户登录后,后台会返回一个token给前端,前端下次进入首页后,会先判断token是否过期,如果过期自动进入登录页面,本文给大家介绍Vue中Vue router和axios的封装使用教程,感兴趣的朋友一起看看吧
    2023-11-11
  • vue3 setup中defineEmits与defineProps的使用案例详解

    vue3 setup中defineEmits与defineProps的使用案例详解

    在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据,使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收,本文给大家介绍vue3 setup中defineEmits与defineProps的使用案例,感兴趣的朋友一起看看吧
    2023-10-10
  • vue v-for循环出来的数据动态绑定值问题

    vue v-for循环出来的数据动态绑定值问题

    这篇文章主要介绍了vue v-for循环出来的数据动态绑定值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue axios登录请求拦截器

    vue axios登录请求拦截器

    这篇文章主要介绍了vue axios登录请求拦截器,判断是否登录超时,或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下
    2018-04-04
  • vue-extend和vue-component注册一个全局组件方式

    vue-extend和vue-component注册一个全局组件方式

    这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue实现页面刷新动画

    vue实现页面刷新动画

    这篇文章主要为大家详细介绍了vue实现页面刷新动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue插槽slot全部使用方法示例解析

    Vue插槽slot全部使用方法示例解析

    插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签,这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
    2023-03-03
  • vue3动态路由+菜单栏的实现示例

    vue3动态路由+菜单栏的实现示例

    在后台管理系统,可以根据登录用户的不同返回不同路由,页面也会根据这些路由生成对应的菜单,本文主要介绍了vue3动态路由+菜单栏的实现示例,感兴趣的可以了解一下
    2024-04-04

最新评论