vue3使用element-Plus，简单实现el-table展开功能，单击行展开，隐藏小图标，手风琴模式

怎么默认使用展开，在这里就不叙述了。自己去官方看实例很简单。主要就是说一下简单实现标题功能。
首先实现单击行展开
el-table添加以下核心属性，属性对应自己查看官方文档，这里不讲解了

row-key="id"
:expand-row-keys="expands"
@row-click="clickRowHandle"

添加一个expands

const expands = ref([])

接下来单击触发

//点击行展示
const clickRowHandle = (row:any) => {
   if (proxy.expands.includes(row.id)) {
      proxy.expands = proxy.expands.filter(val => val !== row.id);
   } else {
      proxy.expands = [];//添加该代码实现手风琴模式，删除该代码取消手风琴模式
      proxy.expands.push(row.id);
   }
}

上面代码中proxy和vue2中的$this差不多
但是到vue3中必须单独引用，自行添加

import { getCurrentInstance } from 'vue'
const { proxy } = (getCurrentInstance() as any)

以上就可以实现点击行展开关闭功能。
以下是取消小图标方法，把type="expand"添加一个width=“1”

<el-table-column type="expand" width="1">

css也的添加display: none;
:deep是穿透

:deep(.el-table__expand-icon){
   display: none;
}

PS：下述代码是点击行变色
在el-table里面添加属性highlight-current-row

highlight-current-row

修改css

:deep(.el-table__body tr.current-row>td.el-table__cell) {
    background-color: #00a2ff;
    color: #ffffff;
}

以下代码是修改展开的背景色

:deep(.el-table__expanded-cell){
   background-color: #FAFAFA !important;
}