ElementUI--el-dropdown 使用click方法失效问题

104 阅读1分钟

遇到的问题为:自定义触发按钮,之前是直接在el-dropdown-item上绑定@click事件,就可以监听到选中项的值。但这次做的时候就有问题了。之后在网上找了找,发现还是得用文档中的写的command事件去监听。只是在监听之前还需要在el-dropdown-item上设置command属性,进行关联。如下所示:

2222222222222222.png

1111111111111111.png

具体代码如下:

                    <td >
                        <span class="status" :style="{background: status.bgc, border: '1px solid' + status.borderBgc}"
                        >{{ status.value }}</span>
                        <el-dropdown trigger="click" @command="handleStatus">
                            <i class="el-icon-edit"></i>
                            <el-dropdown-menu slot="dropdown" >
                                <template v-for="item in statusList">
                                    <el-dropdown-item  :command="item">
                                        <span class="status" :style="{background: item.bgc, border: '1px solid' + item.borderBgc}" 
                                        >{{ item.value }}</span>
                                    </el-dropdown-item>
                                </template>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </td>
statusList: [
                {
                    value: '提前实施',
                    bgc: '#f7f7f7',
                    borderBgc: '#d5d5d5'
                },
                {
                    value: '实施中',
                    bgc: '#daefd2',
                    borderBgc: '#80b740'
                },
                {
                    value: '质保期',
                    bgc: '#feeac4',
                    borderBgc: '#fcd079'
                },
                {
                    value: '暂停中',
                    bgc: '#d6dbe4',
                    borderBgc: '#617395'
                },
                {
                    value: '已结项',
                    bgc: '#d1e0fb',
                    borderBgc: '#96b8f5'
                },
                {
                    value: '异常取消',
                    bgc: '#feeac4',
                    borderBgc: '#fcd079'
                },

            ]
      handleStatus (command) { 
           console.log(command);
        },