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