You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.5 KiB
79 lines
1.5 KiB
<template> |
|
<el-table :data="tableData" :row-class-name="rowClassMethod"> |
|
<el-table-column prop="id" label="Id"></el-table-column> |
|
<el-table-column prop="name" label="Name"></el-table-column> |
|
<el-table-column prop="score" label="Score"></el-table-column> |
|
</el-table> |
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
name: "Table_Demo9", |
|
data() { |
|
return { |
|
tableData: [ |
|
{ |
|
id: '12987122', |
|
name: 'Tom', |
|
score: '99' |
|
}, |
|
{ |
|
id: '12987123', |
|
name: 'black', |
|
score: '81' |
|
}, |
|
{ |
|
id: '12987124', |
|
name: 'harry', |
|
score: '70' |
|
}, |
|
{ |
|
id: '12987125', |
|
name: 'Jerry', |
|
score: '58' |
|
} |
|
] |
|
} |
|
}, |
|
methods: { |
|
rowClassMethod(e) { |
|
console.log(e); |
|
const {row} = e; |
|
let rowClassName = ""; |
|
const score = row.score; |
|
console.log(score) |
|
if (score >= 85) { |
|
console.log(1) |
|
rowClassName = "excellent" |
|
} else if (score > 75) { |
|
console.log(2) |
|
rowClassName = "good" |
|
} else if (score > 65) { |
|
rowClassName = "normal" |
|
} else { |
|
rowClassName = "bad" |
|
} |
|
return rowClassName |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.el-table :deep(.excellent) { |
|
background-color: darkorange; |
|
} |
|
|
|
.el-table :deep(.good) { |
|
background-color: cornflowerblue; |
|
} |
|
|
|
.el-table :deep(.normal) { |
|
background-color: aliceblue; |
|
} |
|
|
|
.el-table :deep(.bad) { |
|
background-color: #ff6666; |
|
} |
|
</style>
|
|
|