element-UI非radio按钮单选Table表格(highlight-current-row),头部背景颜色更换以及默认某行不可选中不可高亮_elementui table highlight-selection-row

1.首先大家现在查阅所有资料都可能无法找到关于highlight-current-row单选表格中的问题，这也是我在开发并且秃头的过程中踩过的好多坑，拿出来给大家分享分享。

首先并不是radio单选表格，而是这种带色块的单选表格

2.也就是配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

3.可是现在碰到的问题是如果某一条不满足条件是不可选中的，但是我查阅了所有资料却无法解决，最后想到了利用css可以解决。首先给el-table添加 :cell-style=“cellStyle”，这个方法用来控制table的样式。

 <el-table
          :data="InvestAdvisorList"
          @row-click="handle"
          ref="multipleTable"
          :header-cell-style="{background:'#DAEDFF'}"
          :row-class-name="tableRowClassName"
          highlight-current-row
          :cell-style="cellStyle"
        >
1
2
3
4
5
6
7
8
9

4.这个方法呢会每次进入页面自动执行，参数就是data数据，然后这个方法会循环数据，此时就可以判断如果某一项不符合需求就可以return出css属性，此时我们使用pointer-events:none属性，就是让鼠标原有的事件不能实现，这样表格也就无法高亮，数据某一行也无法选中，就可以达到我们禁用的效果。

 cellStyle(data){
        if(data.row.OPER_FLAG!=="A") {
          return "pointer-events:none"
        }
    },
1
2
3
4
5

5.利用:header-cell-style属性可以更改表头的背景颜色，详情请见element-ui官方

 <el-table
          :data="InvestAdvisorList"
          @row-click="handle"
          ref="multipleTable"
          :header-cell-style="{background:'#DAEDFF'}"
          :row-class-name="tableRowClassName"
          highlight-current-row
          :cell-style="cellStyle"
        >
1
2
3
4
5
6
7
8
9

6.另外大家如果想实现单选框默认选中以及选中不可取消状态，可参考我的其他文章，element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态