<template>
<div class="header">
<el-table
:data="tabelData"
:header-cell-style="rowClass"
:cell-style="cellStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
width="80"
></el-table-column>
<el-table-column prop="num" label="特征重要性" align="center" sortable="">
<template slot-scope="scope">
<el-progress
type="line"
:percentage="scope.row.num * 100"
:format="format(scope.row, scope.column)"
color="#3c79f2"
:text-inside="false"
:stroke-width="12"
/>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "bostTable",
props: {
data: {
type: Object,
},
},
data() {
return {
tabelData: [
{
date: "featture1",
num: 1,
},
{
date: "featture2",
num: 0.7,
},
{
date: "featture3",
num: 0.5,
},
{
date: "featture4",
num: 0.8,
},
],
};
},
components: {
Search,
},
created() {
},
mounted() {},
methods: {
rowClass({ row, rowIndex }) {
return "background:#3c79f2; color:#fff";
},
format(row, column) {
return () => {
if (column.label === "特征重要性") {
return row.num + "";
}
};
},
//设置指定行、列、具体单元格颜色
cellStyle({ row, column, rowIndex, columnIndex }) {
// console.log(rowIndex, columnIndex);
// if (columnIndex === 0) {
// //指定坐标rowIndex ：行，columnIndex ：列
// return "background:red"; //rgb(105,0,7)
// } else {
// return "";
// }
},
},
};
</script>
<style lang='scss' scoped>
.main-content-box {
border: solid 1px #000;
}
#svg-canvas {
padding-top: 20px;
}
</style>