vue组件部分
使用elementUI的table,利用index给前三设置不同的颜色及样式
关键要素:scope.$index+1
<template>
<div class="thematicResources">
<el-table ref="singleTable" :data="deptData" highlight-current-row :show-header="false" style="width: 100%">
<el-table-column type="index" width="50">
<template slot-scope="scope">
<span v-if="scope.$index+1 ==1" class="no1">{{scope.$index+1}}</span>
<span v-else-if="scope.$index+1 ==2" class="no2">{{scope.$index+1}} </span>
<span v-else-if="scope.$index+1 ==3" class="no3">{{scope.$index+1}} </span>
<span v-else class="no">{{scope.$index+1}} </span>
</template>
</el-table-column>
<el-table-column prop="name" width="200" label="部门" > </el-table-column>
<el-table-column prop="value" label="数量">
<template scope="scope">
<span v-if="scope.$index+1 ==1" style="color:#FF545B">{{ scope.row.value }}</span>
<span v-else-if="scope.$index+1 ==2" style="color: #FCBC24">{{ scope.row.value }}</span>
<span v-else-if="scope.$index+1 ==3" style="color: #0AF9D8">{{ scope.row.value }}</span>
<span v-else style="color: #36BAFF">{{ scope.row.value }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
js部分
<script>
export default {
components: {},
data() {
return {
deptData: [],
};
},
computed: {
},
mounted() {
this.initTableData()
},
beforeDestroy() {},
methods: {
//数组排序
sortData(arr){
for(let i=0;i<arr.length-1;i++){
for(let j=0;j<arr.length-1-i;j++){
if(arr[j].value < arr[j+1].value){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
return arr
},
//获取表格数据
initTableData(){
this.deptData=[];
let alldata=this.sortData(ThematicResourcesConfig.departmentalData);
//引入数据文件,ThematicResourcesConfig.departmentalData本地数据
console.log(alldata)
for(let i=0;i<alldata.length;i++){
this.deptData.push(alldata[i])
if(i==9){//top10
break
}
}
},
}
}
</script>
css部分
yellow-bg.png这些即为不同的背景图片
.no1{
display: inline-block;
text-align: center;
background-image: url("../../../../../static/img/lz-data-monitor/red-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
line-height: 20px;
}
.no2{
display: inline-block;
text-align: center;
background-image: url("../../../../../static/img/lz-data-monitor/yellow-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
line-height: 20px;
}
.no3{
display: inline-block;
text-align: center;
background-image: url("../../../../../static/img/lz-data-monitor/green-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
line-height: 20px;
}
.no{
display: inline-block;
text-align: center;
background-color: #007EFF;
border-radius: 5px;
width: 20px;
height: 20px;
line-height: 20px;
}
数据文件部分,可以从后台接口获取,此处为了测试制造的静态数据
var ThematicResourcesConfig = ThematicResourcesConfig || {};
(function () {
var ThematicResourcesConfigColor = ["#8e71c7", "#13CE66", "#F36868", "#8e71c7", "#13CE66", "#F36868"]
ThematicResourcesConfig = {
departmentalData: [{
value: 14,
name: "住建委"
},
{
value: 14,
name: "卫计委"
},
{
value: 16,
name: "园林局"
},
{
value: 639,
name: "自然资源与规划局"
}, {
value: 25,
name: "地震局"
},
{
value: 39,
name: "统计局"
},
{
value: 13,
name: "卫生局"
},
{
value: 14,
name: "教育局"
}, {
value: 20,
name: "交通局"
},
{
value: 13,
name: "旅游局"
},
{
value: 3,
name: "文物局"
},
{
value: 5,
name: "公安局"
},
{
value: 107,
name: "执法局"
},
{
value: 24,
name: "环保局"
},
{
value: 89,
name: "发改委"
}
],
}
})()