Dropdown下拉菜单

一、效果

点击更多按钮，展开如下：

二、vue2代码

<el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="remove(scope.row.baseId)">删除</el-button>
          <el-dropdown style="margin-left: 10px" trigger="click">
            <el-button type="primary" size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item>
                <el-link @click="openAreaInfoIndex(scope.row)" :underline="false">地块信息</el-link>
              </el-dropdown-item>
              <el-dropdown-item >
                <el-link @click="handlePrint(scope.row)" :underline="false">二维码</el-link>
              </el-dropdown-item>
              <el-dropdown-item >
                <el-link @click="openPlantContractIndex(scope.row)" :underline="false">合同</el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>

三、vue3代码

<el-dropdown>
            <el-button style="margin-left: 10px" type="primary" size="small">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="btnList.indexOf('unlocked')!=-1&&scope.row.userStatus == 1">
                  <el-link @click="handleChangeUserStatus(scope.row.userId, 2)" :underline="false">激活</el-link>
                </el-dropdown-item>
                <el-dropdown-item v-if="btnList.indexOf('locked')!=-1&&scope.row.userStatus == 2">
                  <el-link @click="handleChangeUserStatus(scope.row.userId, 1)" :underline="false">锁定</el-link>
                </el-dropdown-item>
                <el-dropdown-item v-if="btnList.indexOf('delete')!=-1">
                  <el-link  @click="deleteById(scope.row)" :underline="false">删除</el-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>