el-dropdown的显示问题

心已赠人 2022-05-13 13:24 930阅读 0赞

最近项目中用到了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" :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();
            },