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

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

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

添加一个expands

const expands = ref([])
1

接下来单击触发

//点击行展示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);   }}
1
2
3
4
5
6
7
8
9

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

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

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

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

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

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

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

highlight-current-row
1

修改css

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

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

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