隐藏elementUI的表格扩展列

最新推荐文章于 2023-06-13 14:07:36 发布

原创最新推荐文章于 2023-06-13 14:07:36 发布 · 874 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在ElementUI的Table组件中自定义扩展行显示，通过调整CSS样式和使用v-if解决默认箭头显示问题，同时保持表格边框一致性。

问题：

使用elementUI的Table组件，表格嵌套扩展行，不采用elementUI默认的箭头操作显示扩展行，使用自定义操作按钮，表格带有边框

解决：

由于不想显示出来扩展列，所以给扩展列组件el-table-column设置了样式display:none，但是实际上并没有解决问题。使用v-show和设置display:none并没有区别，使用v-if真的解决了，但是扩展行木有了，文档中也没有相关配置项。

最后只能’曲线救国‘了，给扩展列组件el-table-column设置width="1"，此时看不见扩展列，但是表格边框会有一个是重叠的，变粗了。此时配合样式把扩展列以及扩展列前一个设置class-name="no_border_right"，把这两列的右边框设置为0。

<el-table
  v-loading="loading"
  row-key="id"
  :expand-row-keys="expandRowKeys"
  :data="list"
  border
  style="width: 100%"
  class="expand_table"
>
  <el-table-column
    prop="name"
    label="姓名"
    align="center"
    width="120"
  />
  <el-table-column
    prop="telPhone"
    label="手机号码"
    align="center"
    width="150"
  />
  <el-table-column
    prop="source"
    label="操作"
    align="center"
    width="100"
    class-name="no_border_right"
  >
    <template slot-scope="scope">
      <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
    </template>
  </el-table-column>
  <el-table-column class-name="no_border_right" type="expand" width="1">
    <template slot-scope="scope">
      <expandTable :source-data="detailData" :scope="scope" @toggleRow="toggleRow(scope.row)" />
    </template>
  </el-table-column>
</el-table>

.expand_table{
  .no_border_right{
    border-right: 0 none;
  }
}