vue调用接口，做成select下拉框

h_6543210

已于 2023-04-18 14:42:25 修改

阅读量3.4k

点赞数 5

文章标签： vue.js elementui javascript

于 2022-06-01 18:30:18 首次发布

本文链接：https://blog.csdn.net/m0_68428581/article/details/125087876

版权

1.实现效果

2.代码

(1)下拉框

<el-form-item label="业务类型" prop="proKey">
        <el-select
          v-model="form.proKey"
          placeholder="请选择业务类型"
          clearable
          filterable
          style="width: 170px"
        >
          <el-option
            v-for="item in proOptions"
            :key="item.processKey"
            :label="item.processName"
            :value="item.processKey"
          >
          </el-option>
       </el-select>
</el-form-item>

(2)引入对应的数据接口

import { getProcessSelectList } from "@/api/system/process";

(3)定义一个字段，调用接口函数

data() {
    return {
      proOptions: [],
    };
},
created() {
    this.getproKey();
},
methods: {
    getproKey() {
      this.loading = true;
      getProcessSelectList().then((response) => {
          this.proOptions = response.data;
          //console.log(this.proOptions);
        })
        .catch((err) => {
          console.log(err);
        });
     },
},

附：接口写法

export function getProcessSelectList(query) {
    return request({
      url: '/process/getProcessSelectList',
      method: 'get',
      params: query
    })
  }