前提
公司有个业务需求需要点击表格的展开箭头显示自定义内容
查阅UI文档有自带的只是需要调整箭头位置和文本一列展示,目前箭头是自己占了一列的宽度
文档地址
看下官方文档的写法 用了一列来实现展开效果type设置为expand
我们自定义一个展开列把宽度设置为1,然后再下一列加上展开的icon图表
效果目前是这样的,现在需要去除自带的展开图表
编写自定义展开逻辑
目前效果上面的是之前的测试数据 看下面就可以
展开的icon就使用表格自带的就行不用额外写
<h2>表格自定义展开箭头图表</h2>
<div class="expand">
<el-table
border
:data="dataList"
:expand-row-keys="expands"
row-key="idCard"
>
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<div>{{ scope.row.sourceName }}</div>
<div>{{ scope.row.streetName }}</div>
</template>
</el-table-column>
<el-table-column
prop="sourceName"
label="人员类型"
show-overflow-tooltip
>
<template slot-scope="scope">
<span>
<i
class="el-icon el-icon-caret-right icon_color"
:class="[
{
'el-table__expand-icon--expanded':
expandsObj[scope.row.idCard],
},
]"
@click="setExpand(scope.row)"
></i>
{{ scope.row.sourceName }}
</span>
</template>
</el-table-column>
<el-table-column
prop="streetName"
label="所属街道"
show-overflow-tooltip
/>
<el-table-column
prop="communityName"
label="所属社区"
show-overflow-tooltip
/>
<el-table-column
prop="managementMeasuresName"
label="管理措施"
show-overflow-tooltip
/>
</el-table>
</div>
data(){
expands: [],
expandsObj: {},
}
methods:{
// 展开
setExpand (item) {
const { idCard } = item
if (!this.expands.includes(idCard)) {
this.expands.push(idCard)
this.expandsObj[idCard] = true
} else {
const index = this.expands.indexOf(idCard)
this.expands.splice(index, 1)
this.expandsObj[idCard] = false
}
}
}
css样式需要把原有的图标透明度设置一下
.expand {
::v-deep .el-table__expand-icon {
opacity: 0;
}
}
注意Tips:由于原有的展开列type=expand 宽度为1px在浏览器放大后会左边的边框会显示的粗一点 目前我的解决方案也有了 只是一个不同的css样式 大家可以自己想一下具体方式实现 或者留言给我