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>

展示效果圖：

在這里插入圖片描述