问题:
使用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;
}
}