关于element-ui的折叠板的冒泡行为


先简单记录一下:

el-collapse-item 的 title 区域会有冒泡行为,禁止冒泡用@click.stop。 但是在其中的按钮如果被 disabled 时,此按钮的 stop 就失效了,解决办法是,在外层增加一层 div,加上@click.stop

           <el-collapse
                v-model="activeNames"
                size="mini"
                :loading="loading"
                :style="{maxHeight: containerHeight + 'px', overflowY: 'auto'}"
                @change="handleCollapseChange"
            >
                <el-collapse-item
                    v-for="(tags, index) in tagsData"
                    :key="index"
                    :name="tags.tagKey"
                    align="left"
                >
                    <span 
                        slot="title"
                        class="collapse-title"
                    >
                        标签键:{{ tags.tagKey }}
                        <div @click.stop> <!-- 按钮被禁用,防止冒泡会失效 -->
                            <el-button
                                v-if="activeNames.includes(tags.tagKey)" 
                                size="mini"
                                :disabled="tableSelectionList && tableSelectionList[`multipleTable-${index}`] &&
                                    tableSelectionList[`multipleTable-${index}`].length > 0 ? false : true"
                                @click.stop="batchDeleteTags(index)"
                            >
                                批量删除标签值
                            </el-button>
                        </div>
                    </span>
                    <el-table
                        :data="tags.tagValues"
                        style="width: 100%"
                        size="mini"
                        tooltip-effect="light"
                        :header-cell-style="rowClass"
                        border
                        @selection-change="
                            (selection) => {
                                handleSelectionChange(selection, index)
                            }"
                    >
                        <el-table-column
                            type="selection"
                            width="50"
                        />
                        <el-table-column
                            label="标签值"
                            prop="tagValue"
                            width="350"
                        />
                        <el-table-column
                            label="绑定资源"
                            prop="resource"
                            :formatter="boundResource"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="操作"
                            width="100"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    size="mini"
                                    @click="bindResource(scope.row, tags.tagKey)"
                                >
                                    绑定资源
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <p class="selection-display">
                        已选中
                        {{ tableSelectionList && tableSelectionList[`multipleTable-${index}`] &&
                            tableSelectionList[`multipleTable-${index}`].length || 0 }}
                        项 / 共 {{ tags.tagValues.length }} 项
                    </p>
                </el-collapse-item>
            </el-collapse>

声明:Xuhao's Blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 关于element-ui的折叠板的冒泡行为


Carpe Diem and Do what I like