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>
展示效果图：
