详细错误:
在网上查了很久,发现基本都是没加 el-dropdown-menu 造成的,但是我加了:
<template v-if="reportCommands !== undefined">
<span v-for="item in reportCommands" :key="item.index">
<el-button style="margin-left: 3px" v-if="item.type === 'button'" @click="onCustomButtonClick(item.command, item.args, item.actionType)">{{ $t(item.lb) }}</el-button>
<el-dropdown style="margin-left: 3px" v-else-if="item.type === 'dropDownButton'" trigger="click" :key="item.index" @command="onCustomDropDownButtonClick">
<el-button type="primary">{{ $t(item.lb) }}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="child in item.children" :key="child.id" :command="beforeCustomDropDownButtonClick(child.command, child.args, child.actionType)">
{{ $t(child.lb) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown style="margin-left: 3px" v-else-if="item.type === 'splitButton'" split-button @click="onCustomButtonClick(item.command, item.args, item.actionType)" @command="onCustomDropDownButtonClick" type="primary">
{{ $t(item.lb) }}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="child in item.children" :key="child.id" :command="beforeCustomDropDownButtonClick(child.command, child.args, child.actionType)">
{{ $t(child.lb) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</template>
仔细查看报错里的 tabIndex ,加上 element 官网里,给 dropdown 的一个属性 “tabIndex”,差不多能分析出来,可能是因为我的 dropdown-item 是 v-for 循环生成,不是直接标签列出,所以需要给一个 tabIndex。
解决方案
在 el-dropdown-menu 上加上了 :tabIndex=“item.index”,问题得以解决:
<template v-if="reportCommands !== undefined">
<span v-for="item in reportCommands" :key="item.index">
<el-button style="margin-left: 3px" v-if="item.type === 'button'" @click="onCustomButtonClick(item.command, item.args, item.actionType)">{{ $t(item.lb) }}</el-button>
<el-dropdown style="margin-left: 3px" v-else-if="item.type === 'dropDownButton'" trigger="click" :key="item.index" :tabindex="item.index" @command="onCustomDropDownButtonClick">
<el-button type="primary">{{ $t(item.lb) }}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="child in item.children" :key="child.id" :command="beforeCustomDropDownButtonClick(child.command, child.args, child.actionType)">
{{ $t(child.lb) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown style="margin-left: 3px" v-else-if="item.type === 'splitButton'" :tabindex="item.index" split-button @click="onCustomButtonClick(item.command, item.args, item.actionType)" @command="onCustomDropDownButtonClick" type="primary">
{{ $t(item.lb) }}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="child in item.children" :key="child.id" :command="beforeCustomDropDownButtonClick(child.command, child.args, child.actionType)">
{{ $t(child.lb) }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</template>