el-table render-header 自定义表头，在表头中嵌套el-dropdown,下拉菜单的点击事件无法触发

Question

1. 使用el-table render-header 自定义表头，在表头中嵌套el-dropdown,下拉菜单的点击事件无法触发

command是el-dropdown的一个事件，点击菜单项触发的事件回调
代码如下，使用的JSX语法，目前菜单已渲染出来，但是点击没有反应，是不是事件不能这样写

  <el-table :data="tableData"  style="width: 100%">
                  <el-table-column  prop="date"  label="工号"  sortable  width="180">
                  </el-table-column>
                  <el-table-column  prop="name"  label="姓名"  sortable  width="180">
                  </el-table-column>
                  <el-table-column  prop="address"  label="岗位" sortable @sort-method="byPost">
                  </el-table-column>
                  <el-table-column :render-header="renderEmotionValue" prop="address">
                    <template slot-scope="scope">
                      <span>{{scope.row.address}}</span>
                    </template>
                  </el-table-column>
              </el-table>

方法部分：

 renderEmotionValue(creatElement, { column, $index }) {
      return (
        <el-dropdown command={this.handleCommand }>
          <span class='el-dropdown-link'>
          情感值<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-item command='c'>累计数量升序</el-dropdown-item>
            <el-dropdown-item command='d'>累计数量降序</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      )
    },
    handleCommand(command) {
      console.log(command)
      this.$message('click on item ' + command)
    }

Answer 1

command改成onCommand即可

<el-dropdown onCommand={ this.handleCommand }>

Answer 2

楼主，你好~暂时没找到好的解决方案，不过可以解决问题。具体代码如下：

renderEmotionValue(creatElement, { column, $index }) {
  return (
    <el-dropdown>
    <span class='el-dropdown-link'>
    情感值<i class='el-icon-arrow-down el-icon--right'></i>
    </span>
    <el-dropdown-menu slot='dropdown'>
    // 这里
    <el-dropdown-item nativeOn-click={(e) => this.handleCommand('a')}>当前数量升序</el-dropdown-item>
    <el-dropdown-item nativeOn-click={(e) => this.handleCommand('b')}>当前数量降序</el-dropdown-item>
    <el-dropdown-item nativeOn-click={(e) => this.handleCommand('c')}>累计数量升序</el-dropdown-item>
    <el-dropdown-item nativeOn-click={(e) => this.handleCommand('d')}>累计数量降序</el-dropdown-item>
    </el-dropdown-menu>
    </el-dropdown>
    )
},

Answer 3

试试这样

   renderEmotionValue(creatElement, { column, $index }) {
      return (
        <el-dropdown command={this.handleCommand.bind(this) }>
          <span class='el-dropdown-link'>
          情感值<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-item command='c'>累计数量升序</el-dropdown-item>
            <el-dropdown-item command='d'>累计数量降序</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      )
    },