给el-table的表头某列添加自定义el-dropdown，点击无效的问题
程序员文章站
2022-06-19 16:19:08
slot的方式： ...
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 }
本文地址：https://blog.csdn.net/Amnesiac666/article/details/109238527
上一篇： WPS表格转换日期格式
下一篇： wps表格怎么按特定的顺序对数据进行排序