扫码关注官方订阅号
使用此代码，如何展开和折叠..用一个按钮切换 ElementPlus Vue3 库的所有 el-collapse-items ？
https://element-plus.org/en-US/component/collapse.html#accordion 2 0 0 P粉600845163 全部回复(2) 我来回复 P粉3478048962024-01-17 09:01:43 2楼 请看一下以下代码片段： const { ref } = Vue const app = Vue.createApp({ setup() { const items = ref([{id: 1, title: "first", text: "aaaaaaaaaaaa"}, {id: 2, title: "second", text: "bbbbbbbbbbbb"}, {id: 3, title: "third", text: "ccccccccccc"}]) const activeName = ref([1]); const toggleAll = () => { activeName.value = activeName.value.length === items.value.length ? [] : items.value.map(i => i.id) } return { items, activeName, toggleAll }; }, }) app.use(ElementPlus); app.mount('#demo') toggle all {{ item.text }} 赞 +0 添加回复 P粉600845163 回复 P粉2519031632024-01-17 00:46:48 1楼 您无法在手风琴模式下执行此操作。正如文档所述： 为此，您必须删除 accordion 属性并将 activeName 值更改为数组，就像文档中一样： const activeNames = ref(['1']) 要展开/折叠所有项目，您可以创建一个函数，该函数将更改 activeNames 的值以包含 el-collapse-item名称 /em> 组件或为空，例如 toggleElements() { if(activeName.value.length) { activeName.value = []; } else { activeName.value = ['1', '2', '3', ...]; } } 赞 +0 添加回复 P粉600845163 回复
https://element-plus.org/en-US/component/collapse.html#accordion
请看一下以下代码片段：
const { ref } = Vue const app = Vue.createApp({ setup() { const items = ref([{id: 1, title: "first", text: "aaaaaaaaaaaa"}, {id: 2, title: "second", text: "bbbbbbbbbbbb"}, {id: 3, title: "third", text: "ccccccccccc"}]) const activeName = ref([1]); const toggleAll = () => { activeName.value = activeName.value.length === items.value.length ? [] : items.value.map(i => i.id) } return { items, activeName, toggleAll }; }, }) app.use(ElementPlus); app.mount('#demo')
toggle all {{ item.text }}
您无法在手风琴模式下执行此操作。正如文档所述：
为此，您必须删除 accordion 属性并将 activeName 值更改为数组，就像文档中一样：
const activeNames = ref(['1'])
要展开/折叠所有项目，您可以创建一个函数，该函数将更改 activeNames 的值以包含 el-collapse-item名称 /em> 组件或为空，例如
toggleElements() { if(activeName.value.length) { activeName.value = []; } else { activeName.value = ['1', '2', '3', ...]; } }
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
2
830
收藏
请看一下以下代码片段：
const { ref } = Vue const app = Vue.createApp({ setup() { const items = ref([{id: 1, title: "first", text: "aaaaaaaaaaaa"}, {id: 2, title: "second", text: "bbbbbbbbbbbb"}, {id: 3, title: "third", text: "ccccccccccc"}]) const activeName = ref([1]); const toggleAll = () => { activeName.value = activeName.value.length === items.value.length ? [] : items.value.map(i => i.id) } return { items, activeName, toggleAll }; }, }) app.use(ElementPlus); app.mount('#demo')您无法在手风琴模式下执行此操作。正如文档所述：
为此，您必须删除 accordion 属性并将 activeName 值更改为数组，就像文档中一样：
要展开/折叠所有项目，您可以创建一个函数，该函数将更改 activeNames 的值以包含 el-collapse-item名称 /em> 组件或为空，例如
toggleElements() { if(activeName.value.length) { activeName.value = []; } else { activeName.value = ['1', '2', '3', ...]; } }