element-plus组件库el-tab-pane中加入el-dropdown组件、设置el-dropdown-item选项高亮

青旅半醒 2024-03-30 10:44 23阅读 0赞

使用插槽的方式，在el-tab-pane中加入el-dropdown组件  
根据command值设置el-dropdown-item高亮

<el-tabs v-model="activeName" class="main-tabs">
                <el-tab-pane label="人员概况" name="person">
                  <template #label>
                    <el-dropdown class="center" trigger="click" @command="setCommand">
                      <span>
                        人员概况
                        <el-icon>
                          <arrow-down />
                        </el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            :class="{ select: 'person' === command }"
                            command="person"
                            >人员</el-dropdown-item
                          >
                          <el-dropdown-item
                            :class="{ select: 'user' === command }"
                            command="user"
                            >用户</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </template>
                </el-tab-pane>
              </el-tabs>

export default {
        
      components: {
        },
      data() {
        
        return {
        
          command:"person"
        },
      methods: {
        
        /** 下拉菜单设置高亮 */
        setCommand(command) {
        
          this.command = command
        },