当前位置: 代码迷 >> 综合 >> 给el-table的表头某列添加自定义el-dropdown,点击无效的问题
  详细解决方案

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

热度:20   发布时间:2024-03-07 14:55:48.0

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 }

  相关解决方案