使用 Element el-dropdown 报错Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)

详细错误：

在网上查了很久，发现基本都是没加 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>