vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue elementui el-table 四分位图

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

作者:盐多碧咸。。

这篇文章主要介绍了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 四分位图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文