第一步:首先我们把自带的展开按钮直接隐藏
找到这个元素,直接修改css即可隐藏
::v-deep{
.el-table__expand-icon{
display: none !important;
}
}
第二步:我们只需要在指定的列里面,通过插槽修改内容
<el-table-column prop="name" :label="$t('姓名')">
<template v-slot="scope">
<div class="d-flex align-items-center">
<div class="table_expand" v-if="scope.row.hasGroup">
{{ !scope.row.isExpand?"+":'-' }}
</div>
<div>{{ scope.row.name }}</div>
</div>
</template>
</el-table-column>
通过接口获取到的数据,追加一个属性isExpand,用来控制当前行是否展开的状态
const { code, data } = await httpRecipientPage(params)
if (code === 1) {
this.tableList = data?.records?.map((v, index) => ({
...v,
isExpand: false,
}))
}
样式大家自己自定义哈
第三步:配置row-click 和 expand-change的属性
<el-table
lazy
:load="load"
:key="tableKeys"
:tree-props="{children: 'children',hasChildren: 'hasChildren'}"
@row-click="(row,column,e)=>clickRowLoad(row,column,e)"
@expand-change="expandChange"
>
通过点击行 去模拟点击展开按钮触发懒加载事件
clickRowLoad(r, c, e) {
console.log('r, c, e', r, c, e)
if (e.currentTarget.firstElementChild.firstElementChild.firstElementChild?.tagName == 'DIV') {
e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()
} else {
e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()
}
},
为什么要用这个回调呢?因为 expand-change 会在懒加载之后触发,可以避免用户短时间内重复点击按钮导致的bug(我也是亲身经历出来的)
expandChange(row, rows) {
row.isExpand = !row.isExpand
},
具体这个案列,大家可以结合我的上一篇文章一块阅读哈