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