el-select下拉框动态获取及默认选中当前元素

最新推荐文章于 2025-07-13 23:41:43 发布

原创最新推荐文章于 2025-07-13 23:41:43 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#el-select #下拉框

前端专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一个基于Vue.js的应用程序中如何实现从本地存储或路由参数加载本体库列表，并通过下拉菜单选择不同的本体来动态加载对应的实体页面。探讨了组件创建时数据加载的顺序问题。

部署运行你感兴趣的模型镜像

在这里插入图片描述

<el-col :span="2">
            <el-select placeholder="本体库选择" 
            	v-model="ontologyName" 
            	style="width: 130px" 					
            	@change="changeOnto(ontologyName)">
                
                <el-option 
                	v-for="(item) in ontoList" 
                	:key="item.onto_name" 
                	:value="item.onto_name" 	
                	:label="item.onto_name">		
            	</el-option>
            </el-select>
</el-col>

data () {
	return {
	ontoList: [], //本体名称列表
	ontologyName: this.$route.params.ontology ? this.$route.params.ontology : this.$store.state.ontology
	}
}

created() {
    this.getEntity();  // 获取实体页面
    this.getOntoList();  // 获取本体名称列表
},

  methods: {
      // 获取本体名称列表
      getOntoList(){
          const { kb_id } = this.$store.state;
          ctrlOntology({action:'list', params: { pageSize:100, pageNum:1, dbId: kb_id }})
          .then(res => {
              res.items.forEach(item => {
                  var obj = {}
                  obj.onto_name = item['本体']
                  obj.onto_key = item._key
                  this.ontoList.push(obj)
              })
              console.log(this.ontoList)
          })
      },

      // 下拉框选择本体跳转到相应的实体列表
      changeOnto(ontologyNamey) {
          // 将本体名称和本体key传入store
        //   this.$store.commit("SET_ONTO_NAME", ontology);
        //   this.$store.commit("SET_ONTO_KEY", row._key);

          this.getEntity()
      }
}