vue + element table表格@row-click事件与el-switch冲突 怎么单独触发el-switch

<el-table
v-loading="listLoading"
:data="list1"
element-loading-text="Loading"
fit
highlight-current-row
@row-click="redirectClick"
>
<el-table-column label="广告主编号" show-overflow-tooltip>
<template slot-scope="scope">
<span class="managcus_table_color">{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="广告主名称" show-overflow-tooltip>
<template slot-scope="scope">
<span class="managcus_table_color">{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="公司主体名称" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="启用状态" show-overflow-tooltip>
<template slot-scope="scope">
<el-switch
v-model="scope.row.customer55"
active-color="#409EFF"
inactive-color="#DCDFE6"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="平台授权情况">
<template slot-scope="scope">
<span class="managcus_table_color">{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="联系人">
<template slot-scope="scope">
<span>{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="登录邮箱">
<template slot-scope="scope">
<span>{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="最后一次登录时间">
<template slot-scope="scope">
<span>{{ scope.row.customerNo }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link
type="primary"
:underline="false"
@click.stop="rowClick(scope.row)"
>
管理
</el-link>
<el-link
type="primary"
:underline="false"
style="margin-left: 5px"
@click.stop="deleteCu(scope.$index, scope.row)"
>
重置密码
</el-link>
</template>
</el-table-column>
</el-table>

回答

在你的switch change事件中，加上停止事件的传播

<el-switch
    @change="switchChange"
    v-model="scope.row.customer55"
    active-color="#409EFF"
    inactive-color="#DCDFE6"
>
</el-switch>
switchChange() {
    event.stopPropagation()
}

典型的事件冒泡的问题。
el-switch包个父元素写@click.stop

可以给switch加个原生的阻止冒泡的点击事件

<el-switch
    v-model="scope.row.customer55"
    active-color="#409EFF"
    inactive-color="#DCDFE6"
    @click.native.stop
>

以上是 vue + element table表格@row-click事件与el-switch冲突 怎么单独触发el-switch 的全部内容， 来源链接： utcz.com/a/37522.html

回到顶部