el-dropdown 显示上次选中的选项(加上<template #dropdown> </template>)

<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>

  

posted @ 2021-03-01 15:48  银耳钉  阅读(3190)  评论(2编辑  收藏  举报