要求
如上图所示,要给表格中的单元格加样式,如果有 数据 就在左上角加 个符号,并且鼠标放上去会有提示。
要实现这个效果要分为两个步骤。
1.有 数据 就在左上角加 个符号
在这里要用上 Table 表格 中的一个属性 cell-class-name。
这个属性可以返回一个函数,函数的参数分别是 row, column, rowIndex, columnIndex
其中row和column是这一行和一列的数据, rowIndex和columnIndex是行号和列号。这个函数的返回值就是类名。
以下就是代码
template:
script
//给目标考核中的有数据的单元格右上角添加图片
tablecellClassName({ row, rowIndex, column, columnIndex }) {
console.log(rowIndex)
let arr = Object.keys(this.table_list[rowIndex].tp)
if (arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
if (column.label == arr[i]) {
return 'test'
}
}
}
},
style:
.test {
position: relative;
}
.test::before {
content: '';
display: block;
width: 1rem;
height: 1rem;
background: #fff url('../../../assets/biaoshi.png') no-repeat center center;
background-size: 100%;
position: absolute;
top: 0;
right: 0px;
}
2.鼠标放上去的弹出层
可以用插槽 slot-scope="scope" 其中"scope" 就是每一行的数据可以通过打点去调用
这里面的scope.row就是这行所有的数据,所以说后端传的数据这里面也有。
代码:
template:
<el-table-column label="考核目标" align="center">
<el-table-column
width="66"
:prop="showyeararr[0]"
:label="showyeararr[0]"
align="center"
label-class-name="back"
>
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p v-if="scope.row.tpShow[showyeararr[0]] <= 0.12">总磷≤0.12mg/L</p>
<p v-else-if="scope.row.tpShow[showyeararr[0]] > 0.12">总磷≥0.12mg/L</p>
<p v-else>暂无数据</p>
<div slot="reference">
{{ scope.row[showyeararr[0]] }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column width="66" :prop="showyeararr[1]" :label="showyeararr[1]" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p v-if="scope.row.tpShow[showyeararr[1]] <= 0.12">总磷≤0.12mg/L</p>
<p v-else-if="scope.row.tpShow[showyeararr[1]] > 0.12">总磷≥0.12mg/L</p>
<p v-else>暂无数据</p>
<div slot="reference">
{{ scope.row[showyeararr[1]] }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column width="66" :prop="showyeararr[2]" :label="showyeararr[2]" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p v-if="scope.row.tpShow[showyeararr[2]] <= 0.12">总磷≤0.12mg/L</p>
<p v-else-if="scope.row.tpShow[showyeararr[2]] > 0.12">总磷≥0.12mg/L</p>
<p v-else>暂无数据</p>
<div slot="reference">
{{ scope.row[showyeararr[2]] }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
width="66"
:prop="showyeararr[3]"
:label="showyeararr[3]"
align="center"
label-class-name="next"
>
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p v-if="scope.row.tpShow[showyeararr[3]] <= 0.12">总磷≤0.12mg/L</p>
<p v-else-if="scope.row.tpShow[showyeararr[3]] > 0.12">总磷≥0.12mg/L</p>
<p v-else>暂无数据</p>
<div slot="reference">
{{ scope.row[showyeararr[3]] }}
</div>
</el-popover>
</template>
</el-table-column>
<i class="el-icon-edit"></i>
</el-table-column>
script:
无
style:
无