elementUI的表格内部样式处理

前置知识：element-ui的表格内部的是嵌套了N层div的，蓝色圈内是外层，是该行的td的样式，红色圈内是内层，是class=cell内部的样式。

如果想改的是整列的背景色，可以通过td改，方法是在el-table最外层：

      <el-table :cell-style="col1_display">

然后在methods里面定义同名的方法，选择适合的条件返回css：

    col1_display({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'display: flex;align-items: center;'
      }
    },

但是这个方法无法挽救内部错位的布局，如下：

因为这里flex布局只针对了cell，而完全没影响到cell里面。

众所周知，想更改组件内部的元素需要深度选择器。但是这里遇到过坑，首先el-table不是内部元素，而是直接可以使用的class，其次如果不使用el-table，而是在外部自定义了一个class，在这里是无效的。我也非常想知道为什么，请大佬们指教。

.el-table  >>> .cell {
  display: flex;
  align-items: center;
}