elementui table-tree 1层不可选中 2层添加css样式

想实现功能: 点击 一层 懒加载 二层table,一层不可点击, 点击二层 添加 border样式
很容易想到用 elementui 自带的highlight-current-row, 会发现 如下图问题.一层 二层 都会带有 css 样式,是不行的.

<el-table
          row-key="expandId"
          ref="devTable"
          border
          highlight-current-row
          lazy
          @row-click="interfaceCkick"
        >

然后 发现,官网有一种方法为 通过:row-class-name给 指定行添加 background-color.发现有一个问题是 只能添加 background-color,无法添加border-left.且对展开 table 不好用.

<el-table
          :data="tableDataComputed"
          style="width: 100%"
          row-key="expandId"
          ref="devTable"
          border
          :row-class-name="tableRowClassName"
          lazy
          :load="loadInterface"
          :height="contentHeight"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @row-click="interfaceCkick"
        >

思路:当 点击的为 二层,把name 存起来,然后 让 row.name === this.interfaceName实现,注意css 样式需要这么写:

    interfaceCkick(row) {
      if (!row.device_name) {
        this.interfaceName = row.name;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      console.error(row);
      if (row.name === this.interfaceName) {
        return "checkRow";
      }
      return "";
    },

.el-table .checkRow {
  td:nth-of-type(1) {
    border-left: 3px solid #22a1ff;
  }
}