vue element admin表格行高设置

Question

礼貌发问：vue-element-admin 开源项目中，Excel下的Export Excel页面中的表格行高该如何修改。

 <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
      <el-table-column align="center" label="Id" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.author }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="Readings" width="115" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="Date" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    </el-table>

Answer 1

假设您想将表格行高设置为 50px，请按照以下步骤操作：

在项目的 CSS 文件（例如，src/assets/css/style.scss 或 src/assets/css/style.css）中添加以下样式：

.custom-row-height .el-table__row {
  height: 50px;
  line-height: 50px;
}

然后，在您的表格组件中添加刚刚定义的自定义样式类 custom-row-height：

<el-table
  v-loading="listLoading"
  :data="list"
  element-loading-text="Loading..."
  border
  fit
  highlight-current-row
  class="custom-row-height"
>
  <!-- ... 其他代码 ... -->
</el-table>