vue3.0+antd实现嵌套子表格一个按钮展开全部

最新推荐文章于 2024-05-22 12:07:07 发布

努力的意义是啥？

最新推荐文章于 2024-05-22 12:07:07 发布

阅读量661

点赞数 5

分类专栏： vite + vue3 + pinia + ts+antd 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42168116/article/details/135476070

版权

vite + vue3 + pinia + ts+antd 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章详细描述了如何在Vue的表格中使用递归组件展示树形结构数据，并实现展开/收缩功能，包括`expandedRowsChange`处理和`expandAllRows`方法的实现。

摘要由CSDN通过智能技术生成

在这里插入图片描述
直接上代码

<a-table
				:columns="columns"
				:data-source="data"
				size="small"
				:pagination="false"
				@expanded-rows-change="expandedRowsChange"
				:expanded-row-keys="expRowKeys"
			>
				<template #expandIcon="props">
					<span v-if="props.record.children">
						<div
							v-if="props.expanded"
							style="display: inline-block; margin-right: 10px"
							@click="
								(e) => {
									props.onExpand(props.record, e)
								}
							"
						>
							<CaretDownOutlined />
						</div>
						<div
							v-else
							style="display: inline-block; margin-right: 10px"
							@click="
								(e) => {
									props.onExpand(props.record, e)
								}
							"
						>
							<CaretRightOutlined />
						</div>
					</span>
					<span v-else style="margin-right: 29px"></span>
				</template>
				<template #operation="{ record }">
					<a-space v-if="record.children">
						<a-button
							type="link"
							block
							@click="onAddcategoryBtn('addChild', record)"
							v-if="!record.isShow"
							>新增子集</a-button
						>
						<a-button type="link" block @click="onAddcategoryBtn('edit', record)"
							>编辑</a-button
						>
						<a-button type="text" danger @click="onDelete(record)">删除</a-button>
					</a-space>
					<a-space v-else>
						<a-button type="link" block @click="onAddcategoryBtn('edit', record)"
							>编辑</a-button
						>
						<a-button type="text" danger @click="onDelete(record)">删除</a-button>
					</a-space>
				</template>
			</a-table>

const isAllexp = ref<boolean>(true)

const expandedRowsChange = (val) => {
	expRowKeys.value = val
}
// 点击按钮可实现展开与收缩
const expandAllRows = () => {
	if (isAllexp.value) {
		isAllexp.value = false
		// 全部展开
		const expandRows = []
		for (let index = 0; index < data.length; index += 1) {
			const element = data[index]
			expandRows.push(element.key)
		}
		expandedRowsChange(expandRows)
	} else {
		isAllexp.value = true
		// 全部收回
		expandedRowsChange([])
	}
}