el-dropdown 显示上次选中的选项(加上


<template>
  <div class="home">
    <el-dropdown :hide-on-click="false" @command="statusChange">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item,index) in dropList"
            :key="index"
            :command="item.value"
            :class="{'selected':status==item.value}"
          >{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      status: '2',
      dropList: [
        { value: '1', label: '黄金糕' },
        { value: '2', label: '狮子头' },
        { value: '3', label: '螺蛳粉' },
        { value: '4', label: '双皮奶' }
      ],
    }
  },
  methods: {
    statusChange(val) {
      console.log('drop statusChange', val)
      this.status = val
    },  
  }
}
</script>

<style scoped lang="scss">
.selected{
  color:red;
}
</style>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM