row-class-name失效原因

我在使用iView的Table中需要自定义一个行内样式区分数据，但是我使用文档中的row-class-name发现没有起效果

    <Table
      ref="table"
      :columns="columns"
      :data="tableList"
      no-data-text="暂无数据"
      class="ivu-mt"
      no-filtered-data-text="暂无筛选结果"
      :row-class-name="getRowClassName"
    >
      <template slot-scope="{ row, index }" slot="right">
        <Button type="primary" @click="editCurrentRow(row, index)">编辑 </Button>
        <Button
         type="error"
          @click="deleteCurrentRow(row, index)"
          style="margin-left: 10px"
          >删除</Button
        >

      </template>
    </Table>

methods：{
        getRowClassName(row,index) {
      console.log(index,"查看样式",row);
      return index?'demo-table-info-row':'demo-table-info-row'
       
    },
}

  <style lang="scss" >

  .table-info-row td {
  background-color: #2db7f5;
  color: #fff;
    }
.table-error-row td {
  background-color: #de1717;
  color: #fff;
    }


</style>

后面发现是应为我在style添加了scope隔绝了，解决方法有两种

第一种不使用scope隔绝 使其成为全局样式

  <style lang="scss" >
.tabform {
  margin: 10px 0;
}

.table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
.table-error-row td {
  background-color: #cf1e2a;
  color: #fff;
}


</style>

 

第二种使用/deep/深度选择器（我使用的就是这种）可以在scope下使用不会影响到全局样式

  <style lang="scss" scoped>
.tabform {
  margin: 10px 0;
}

  /deep/ .table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
/deep/.table-error-row td {
  background-color: #cf1e2a;
  color: #fff;
}


</style>

结语：查阅资料发现这是因为 scoped 样式是 Vue 单文件组件中的一个特性，它确保样式只对该组件生效，通过添加唯一的属性（如 data-v-f3f3eg9）到组件的根元素上，并在 CSS 选择器中添加这个属性来实现样式的局部化。所以没有办法找到你需要添加样式的元素导致row-class-name失效