el-dropdown的显示问题

最近项目中用到了el-dropdown，出现的问题是，例如有三个选项，全部诗词曲，唐诗、宋词、元曲。当我点击唐诗的时候，得到所有唐诗的数据，但是该标签还是显示“全部诗词曲"，正常情况下应该是显示”唐诗“，也就是说并没有根据的选定的标签来显示选项。

解决方式1：在el-dropdown标签内添加span，用来显示选中项。当除法command事件的时候，js中通过拿到的id，再得到该id对应的名字，然后将该名字绑定到droColumnName（一个变量名，可随意取值），然后前端通过该变量显示选中的项的名称。
解决方式二，可以在el-dropdown-item项中绑定一个:v-model=“column.colunName”(随便的名称)。然后js里通过$ref直接得到该id对应的名名称，然后再绑定到该变量。

除了以上两种，目前还没想到其他的方式。

html代码

<el-dropdown ref="dro" size="small"  @command="columnChange" trigger="click">
                   <span class="el-dropdown-link">{{droColumnName}}<i
                           class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                   <el-dropdown-menu slot="dropdown">
                       <el-dropdown-item command="" >全部待审核栏目</el-dropdown-item>
                     <!-- <el-dropdown-item v-for="column in columns" :command="column.columnId">{{column.columnName}}</el-dropdown-item>-->
                      <el-dropdown-item v-for="column in columns" :command="column.columnId" :v-model="column.columnName">{{column.columnName}}</el-dropdown-item>
                   </el-dropdown-menu>
               </el-dropdown>

js代码

 columnChange : function (value) {
            if(value == null || value==''){
                app.droColumnName = "全部待审核栏目";
            }else{
                for(var i in app.columns){
                    if(value == app.columns[i].columnId){
                        app.droColumnName = app.columns[i].columnName;
                    }
                }
            }
            app.queryParams.columnId = value;
            this.queryList();
        },