el-table的type=“selection“多选框居中显示

最新推荐文章于 2023-10-28 01:00:00 发布

原创最新推荐文章于 2023-10-28 01:00:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #restful #前端

Vue2.x 同时被 2 个专栏收录

166 篇文章

订阅专栏

Css/Canvas/SVG/Elementui

144 篇文章

订阅专栏

这篇博客介绍了如何在 Vue 项目中使用 Element UI 的 el-table 组件，通过设置 max-height、cell-style 和事件监听 (@selection-change 和 @row-click) 实现表格的样式定制和交互功能。博主详细讲解了如何调整单元格内文字的左右内边距，并展示了如何在表格选择和行点击事件中进行业务处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述

 <div class="center-table">
    <el-table
      :data="tableDataAll"
      max-height="250"
      ref="alltable"
      border
      :cell-style="tableCellStyle_transfer"
      @selection-change="handleSelectionChange"
      @row-click="openDetails"
      style="width: 215px;">
      <el-table-column
        type="selection"
        align="center"
        header-align="center"
        width="55">
      </el-table-column>

<style lang="scss" scoped>
.center-table{
  ::v-deep .el-table__body-wrapper{
    .cell {
        padding-left: 12px;
        padding-right: 12px;
    }

  }
}
</style>