前端element下拉菜单样式修改[通俗易懂]

大家好，欢迎来到IT知识分享网。

组件官方链接

 el-dropdown: 下拉菜单组件
 el-dropdown-menu 结合 el-dropdown-item： 下拉菜单项
 trigger=”click” ： 表示显示下拉菜单内容是由点击事件触发
 @command： 绑定点击下拉菜单的内容触发的事件
 style=”float:left” ：向左靠

      <div style="float: right;padding-bottom: 10px">
        <!--按月-->
        <el-dropdown trigger="click" @command="handleMonthly">
          <el-button size="mini">
            {
  
  {$t('overview.monthlyStatistics')}}
          </el-button>
          <el-dropdown-menu slot="dropdown" style="width: 240px;">
            <el-dropdown-item v-for="item in yearList" :key="item" style="float:left" :command="item">{
  
  {item}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--按季度-->
        <el-dropdown trigger="click" @command="handleQuarterly">
          <el-button size="mini">
            {
  
  {$t('overview.quarterlyStatistics')}}
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in yearIntervalList" :key="item" :command="item">{
  
  {item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--按年-->
        <el-dropdown trigger="click" @command="handleYearly" :hide-on-click="yearlyHideOnClick">
          <el-button size="mini" @click="yearlyClick">
            {
  
  {$t('overview.yearStatistics')}}
          </el-button>
          <el-dropdown-menu slot="dropdown" style="width: 240px;">
            <el-dropdown-item v-for="item in yearList" :key="item" style="float:left" :command="item">{
  
  {item}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>