element-plus 按钮 展开/隐藏

1、小记

element-plus中el-table 的 expand,箭头控制子项显示，有点丑。
想实现类似bootstrap ，用按钮 展开/隐藏子项的功能

2、页面

<!-- 表内容 --><el-table:data="tableData":border="true":preserve-expanded-content="true"style="width: 100%":expand-row-keys="expands":row-key="getRowKeys"><!-- 子项 --><el-table-column type="expand" width="0"><!-- width隐藏列 --><template #default="props"><div m="4" class="expandcontent"><el-table :data="props.row.family" :border="true" :color="'red'"><el-table-column label="Name" prop="name" /><el-table-column label="State" prop="state" /><el-table-column label="City" prop="city" /><el-table-column label="Address" prop="address" /><el-table-column label="Zip" prop="zip" /></el-table></div></template></el-table-column><!-- 其他数据列 --><el-table-column label="Date" prop="date" /><el-table-column label="Name" prop="name" /><!-- 操作 --><el-table-column label="Operations"><template #default="props"><el-button type="primary" @click="toggleExpand(props.row)">{{ isExpanded(props.row) ? '收起' : '展开' }}</el-button></template></el-table-column></el-table>

3、typescript事件

<script setup lang="tsx">
const getRowKeys = (row) => {return row.id
}
//展开自定义
const expands = ref<string[]>([])
const toggleExpand = (row) => {const key = getRowKeys(row)const index = expands.value.indexOf(key)if (index > -1) {expands.value.splice(index, 1) // 收起} else {expands.value.push(key) // 展开}
}
const isExpanded = (row) => {return expands.value.includes(getRowKeys(row))
}
</script>

4、测试数据

const tableData = [{id: 1,date: '2016-05-03',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',expand: false,family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st',zip: 'CA 94114'},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st ',zip: 'CA 94114'},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st ',zip: 'CA 94114'}]},{id: 2,date: '2016-05-02',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',expand: false,family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114'}]}
]

5、样式

<!-- 样式 -->
<style scoped lang="scss">
// 子项背景色
:deep(.el-table__expanded-cell) {background-color: #cbdde2 !important;
}
// 子项居中
.expandcontent {width: 95%;margin: 0 auto;
}
</style>