先简单记录一下:
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>
Comments | NOTHING