ant design vue a-table树形结构,给选中的树节点记录一个背景色，设置expandedRowKeys后会导致点击图标展开和折叠行失效

1、给选中的树节点记录一个背景色

具体实现方法代码如下

//自定义选中当前行的行为
const customRow = (record: any) => {
return {
onClick: (event: Event) => {
selectRow.value=record
}, // 点击行
onDblclick: (event: Event) => { },
class: {
'selected-table-row': selectRow.value&&selectRow.value.id === record.id
}
};
}
上述代码中selected-table-row就是当前选中行的样式
2、设置expandedRowKeys后会导致点击图标展开和折叠行失效

使用table组件的@expand时间实现onExpanded方法，即可解决点击图标失效的问题
具体实现代码
<a-table class="my-table-class" v-if="tabledata && tabledata.length" :loading="tableLoading"
:columns="columns" :expandedRowKeys="expandedRowKeys" rowKey="id" :data-source="tabledata"
:pagination="false" :defaultExpandAllRows="defaultExpandAllRows" :ellipsis="true"
:scroll="{ y: 700 }"
:customRow="customRow"
@expand="onExpanded"
>
//点击展开图标时触发
const onExpanded = (expanded: boolean, record: any) => {
if(expanded){
expandedRowKeys.value.push(record.id)
}else{
//代表折叠操作
if(expandedRowKeys.value.length>0){
expandedRowKeys.value=expandedRowKeys.value.filter(v=>{
return v!==record.id
})
}
}
}