使用vue如何监听el-collapse 展开与关闭

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue如何监听el-collapse 展开与关闭相关的知识,希望对你有一定的参考价值。

<body>
<div id="counter-event-example">
<p> total </p>
<button-counter v-on:ee="incrementTotal"></button-counter>
<button-counter v-on:ee="incrementTotal"></button-counter>
</div>

<script>
Vue.component('button-counter',
template: '<button v-on:click="increment"> counter </button>',
data: function ()
return
counter: 0

,
methods:
increment: function ()
this.counter += 1
this.$emit('ee', 'cc' )

,
)
new Vue(
el: '#counter-event-example',
data:
total: 'arg'
,
methods:
incrementTotal: function (b)
this.total = b + '1';


)
</script>
</body>
子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,注意,父组件的事件处理函数直接写函数名即可,不要加(),参数直接传递到了父组件的methods的事件处理函数了。
参考技术A el-collapse 上支持 @change,通过回调参数判断,如果是展开它会返回一个name数值(<el-collapse-item>上可以定义name属性,不定义则随机),否则 undefined。

el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常

 

 

问题描述:

element-ui折叠面板,el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高,然后闪一下突然回到正常的高度;

如果el-collapse-item中放的是普通的文本就不会出现这个问题。

 

代码展示:

<el-collapse v-model="activeNames"  @change="handleCollapse" :class="‘table-box‘">
        <!-- 标签 -->
        <el-collapse-item :title="‘‘" name="collapseTag">
          <template slot="title">
            <span class="title">标签</span>
            <span class="sub_title"></span>
          </template>
          <div>
            <el-table
              :data="form.tags"
              border
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                prop="key"
                label="键"
                >
              </el-table-column>
              <el-table-column
                prop="value"
                label="值"
                >
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
</el-collapse>

 

解决方法:

取消折叠面板动画

//折叠面板 取消动画
  .collapse-transition 
    -webkit-transition: 0s height, 0s padding-top, 0s padding-bottom;
    transition: 0s height, 0s padding-top, 0s padding-bottom
  .horizontal-collapse-transition 
    -webkit-transition: 0s width, 0s padding-left, 0s padding-right;
    transition: 0s width, 0s padding-left, 0s padding-right
  .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow 
    -webkit-transition: 0s;
    transition: 0s;
    opacity: 0

 

以上是关于使用vue如何监听el-collapse 展开与关闭的主要内容,如果未能解决你的问题,请参考以下文章

el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常

el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常

如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠?

Vue中 引入使用 element-resize-detector 监听 Dom 元素 宽度高度 变化

Vue中 引入使用 element-resize-detector 监听 Dom 元素 宽度高度 变化

如何使表格行可点击并展开行 - vue.js - element-ui