Element ui中Table给特定的单元格加效果

要求

如上图所示，要给表格中的单元格加样式，如果有 数据 就在左上角加 个符号，并且鼠标放上去会有提示。

要实现这个效果要分为两个步骤。

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：

无