解决elementUI中表格的行（cell）设置固定的高度后，垂直居中失效问题

在这里插入图片描述
在上图中，我们可以看到elementUI中表格的cell设置固定高度为40后，再设置垂直居样式后，不起作用。

当你改变display的属性值后，你会发现设置的高度40就没用，他会随着内容的高度而去撑开。这样也不满足需求。
这个需求是继上一篇博客https://blog.youkuaiyun.com/CuiCui_web/article/details/106531997设置固定高度，根据高度超出显示气泡之后，新增加了需要垂直居中显示。
下面介绍一下如何显示垂直居中：
利用插槽的方式进行设置：

<template slot-scope="scope">
          <span class="verticalAlign">{{ scope.row.id }}</span>
        </template>

样式设置：

.el-table. td>.cell{
    height: 92px;
  }
.verticalAlign {
    height:92px; // 高度与固定的cell高度一致
    display: table-cell; // 这里需要设置为table-cell才行
    vertical-align: middle; // 设置垂直居中样式即可
  }

如果原本表格中设置了插槽，那么只需要增加verticalAlign类名即可。

完整的结构代码如下：

<el-table
      class="testHeightTip"
      :data="tableData"
      @cell-mouse-enter="handleCellMouseEnter"
      style="width: 100%" border>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号"
                       align="center"
                       fixed="left"
                       width="64">
        <template slot-scope="scope">
          <span class="verticalAlign">{{scope.$index  }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
        <template slot-scope="scope">
          <span class="verticalAlign">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        align="left"
        prop="name">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.column.show===true"  popper-class="preTooltip"
                      effect="dark"
                      placement="top">
            <span slot="content" v-html="scope.row.name"></span>
            <span class="verticalAlign"  v-html="scope.row.name"></span>
          </el-tooltip>
          <span class="verticalAlign" v-else v-html="scope.row.name"></span>
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
        <template slot-scope="scope">
          <span class="verticalAlign">{{ scope.row.desc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="快捷操作" width="90">
        <template slot-scope="scope" >
          <div class="verticalAlign" >
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <br>
            <el-button
              style="margin-top:15px;"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>