ant vue

青岛云帆科技

于 2021-02-22 09:38:17 发布

阅读量221

点赞数 3

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_50334742/article/details/113929055

版权

本文介绍了如何在Vue.js应用中利用ElementUI的Select组件结合后台数据字典动态加载选项，通过`v-for`指令遍历`dictTypeList`数组，并设置`v-model`实现数据绑定，从而创建一个可选的下拉列表。在`created`钩子函数中调用`initDictType`方法获取并填充字典数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI select选择器使用记录

  <a-form-item
      label="类型"
      :labelCol="{span: 7}"
      :wrapperCol="{span: 10}">
    <el-select v-model="dataFrom.type" placeholder="请选择" style="width: 100%">
      <el-option
          v-for="item in dictTypeList1"
          :key="item.name"
          :label="item.name"
          :value="item.code">
      </el-option>
    </el-select>
  </a-form-item>

dictTypeList: []

created() {
this.initDictType(),
},

initDictType() {
  request('/user/sysDictKey/dictData', 'get', {'id': '200022'}).then(({data: res}) => {
    this.dictTypeList = res.data
  })
},

结合数据字典