给el-table的表头某列添加自定义el-dropdown，点击无效的问题

slot的方式：

<el-table-column prop="policyNo" label="号码" :align="columnAlign">
<template slot="header">
<el-dropdown trigger="hover" @command="handleCommand">
<span style="font-size:12px;font-weight:100">
号码<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">选中全部</el-dropdown-item>
<el-dropdown-item command="b">取消选中全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>

render-header的方式：

<el-table-column prop="policyNo" :align="columnAlign" :render-header="renderEmotionValue" />

renderEmotionValue(creatElement, { column, $index }) {
return (
<el-dropdown onCommand={this.handleCommand }>
<span style="font-size:12px;font-weight:100">
号码<i class='el-icon-arrow-down el-icon--right'></i>
</span>
<el-dropdown-menu slot='dropdown'>
<el-dropdown-item command='a' >选中全部</el-dropdown-item>
<el-dropdown-item command='b'>取消选中全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
)
}

注意：

两种方式的触发事件的写法不一样：
@command=“handleCommand” 和 onCommand={this.handleCommand }

最后

以上就是自然绿草为你收集整理的给el-table的表头某列添加自定义el-dropdown，点击无效的问题的全部内容，希望文章能够帮你解决给el-table的表头某列添加自定义el-dropdown，点击无效的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。