Vue使用Element折疊面板Collapse如何設置默認全部展開
更新時間：2023年01月18日 11:00:12 作者：suzhiwei_boke
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設置默認全部展開，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Element折疊面板Collapse設置默認全部展開
這個適用于需要for循環(huán) <el-collapse-item>
負責展開的屬性是value
<el-collapse :value="opened">
? <el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa">
? ? <div>XXXXXXXXXXXXXXXXXXXXXXXX</div>
? </el-collapse-item>
</el-collapse>
?
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ??? ?List:[
? ? ? ??? ??? ?{?
? ? ? ??? ??? ??? ?aaa:"123"
? ? ? ??? ??? ?},
? ? ? ??? ??? ?{
? ? ? ??? ??? ??? ?aaa:"354"
? ? ? ??? ??? ?},
? ? ? ??? ??? ?{
? ? ? ??? ??? ??? ?aaa:"asfdvg"
? ? ? ??? ??? ?}
? ? ? ??? ?]
? ? ? };
? ? },
? ? ? computed: {
? ? ? ? ? ? opened() {
? ? ? ? ? ? ? ? return this.List.map((i) => {
? ? ? ? ? ? ? ? ? ? return i.aaa;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? },
? }
</script>:name 只要是子元素的唯一屬性即可
這時會有一個bug，當頁面有數(shù)據(jù)發(fā)生變動時，這個折疊就會重新刷新，造成體驗感變差的現(xiàn)象
Vue實現(xiàn)展開折疊效果
1、創(chuàng)建collapse.js文件
const elTransition =
? "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
? "before-enter"(el) {
? ? el.style.transition = elTransition;
? ? if (!el.dataset) el.dataset = {};
?
? ? el.dataset.oldPaddingTop = el.style.paddingTop;
? ? el.dataset.oldPaddingBottom = el.style.paddingBottom;
?
? ? el.style.height = 0;
? ? el.style.paddingTop = 0;
? ? el.style.paddingBottom = 0;
? },
?
? enter(el) {
? ? el.dataset.oldOverflow = el.style.overflow;
? ? if (el.scrollHeight !== 0) {
? ? ? el.style.height = el.scrollHeight + "px";
? ? ? el.style.paddingTop = el.dataset.oldPaddingTop;
? ? ? el.style.paddingBottom = el.dataset.oldPaddingBottom;
? ? } else {
? ? ? el.style.height = "";
? ? ? el.style.paddingTop = el.dataset.oldPaddingTop;
? ? ? el.style.paddingBottom = el.dataset.oldPaddingBottom;
? ? }
?
? ? el.style.overflow = "hidden";
? },
?
? "after-enter"(el) {
? ? el.style.transition = "";
? ? el.style.height = "";
? ? el.style.overflow = el.dataset.oldOverflow;
? },
?
? "before-leave"(el) {
? ? if (!el.dataset) el.dataset = {};
? ? el.dataset.oldPaddingTop = el.style.paddingTop;
? ? el.dataset.oldPaddingBottom = el.style.paddingBottom;
? ? el.dataset.oldOverflow = el.style.overflow;
?
? ? el.style.height = el.scrollHeight + "px";
? ? el.style.overflow = "hidden";
? },
?
? leave(el) {
? ? if (el.scrollHeight !== 0) {
? ? ? el.style.transition = elTransition;
? ? ? el.style.height = 0;
? ? ? el.style.paddingTop = 0;
? ? ? el.style.paddingBottom = 0;
? ? }
? },
?
? "after-leave"(el) {
? ? el.style.transition = "";
? ? el.style.height = "";
? ? el.style.overflow = el.dataset.oldOverflow;
? ? el.style.paddingTop = el.dataset.oldPaddingTop;
? ? el.style.paddingBottom = el.dataset.oldPaddingBottom;
? }
};
?
export default {
? name: "collapseTransition",
? functional: true,
? render(h, { children }) {
? ? const data = {
? ? ? on: Transition
? ? };
? ? return h("transition", data, children);
? }
};2、在.vue組件中引入
<template>
? ? <div class="container">
? ? ? ? <button @click="isActive = !isActive">展開/折疊</button>
? ? ? ? <collapse>
? ? ? ? ? ? <div v-show="isActive">
? ? ? ? ? ? ? ? <div style="border:1px solid #ddd;padding:10px;">
? ? ? ? ? ? ? ? <h2>歡迎大家品嘗Pizza!</h2>
? ? ? ? ? ? ? ? <h5>這里有你非常喜歡的Pizza!</h5>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </collapse>
? ? ? ? <div>
? ? ? ? ? ? 666
? ? ? ? </div>
? ? </div>
</template>
<script>
import collapse from "#/assets/js/collapse.js";
export default {
? data() {
? ? return {
? ? ? isActive: false
? ? };
? },
? components: {
? ? collapse
? }
};
</script>總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue+elementUI實現(xiàn)表格關鍵字篩選高亮
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)表格關鍵字篩選高亮，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題
今天小編就為大家分享一篇快速解決vue動態(tài)綁定多個class的官方實例語法無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue.js 實現(xiàn)點擊div標簽時改變樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue計算屬性get和set用法,結合實例形式分析了計算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下2019-02-02
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結合完整實例形式分析了vue.js實現(xiàn)表單數(shù)據(jù)雙向綁定相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了vue+canvas繪制時間軸的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
echarts設置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2023-10-10
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中 $emit的用法，通過實例代碼給大家介紹了子組件和父組件的相關知識，需要的朋友參考下吧2018-04-04
用electron 打包發(fā)布集成vue2.0項目的操作過程
這篇文章主要介紹了用electron 打包發(fā)布集成vue2.0項目的操作步驟,把electron 加入到自己項目中各種不兼容，升級版本踩坑無數(shù)個，今天通過本文給大家分享下詳細過程，需要的朋友可以參考下2022-10-10