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>