vue渲染select下拉框的值

雨点打透心脏的1/2处 2022-11-07 05:50 244阅读 0赞

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

<template>
      <div class="tab-container">
        <div class="filter-container" style="margin-bottom: 20px">
          <el-select
            placeholder="全部部门"
            clearable
            style="width: 150px"
            class="filter-item"
            v-model="questionForm.userGrades"
          >
            <el-option
              v-for="item in getOrganList"
              :key="item.id"
              :label="item.organName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
    </template>
    <script>
    //调用接口
    import { getOrgan } from "@/api/alarm/query";
    export default {
      data() {
        return {
           questionForm: {
          },
          getOrganList: [],
        };
      },
      created() {
        //加载部门
        this.getOrgan();
      },
      methods: {
        //获取部门信息接口定义
        getOrgan() {
          const params = {
            organId: 1,
            authority: 1,
          };
          getOrgan(params).then((res) => {
            this.getOrganList = res.data.organs;
          });
        },
      },
    };
    </script>
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>

json数据

{"msg":"success","code":1,"data":{"organIds":[1,2,10,11,12,13,14,15,16,17,18],"organs":[{"id":1,"organName":"部门1","parentId":0,"manager":"zs","phone":null,"companyId":1,"address":null},{"id":2,"organName":"test3","parentId":1,"manager":"zs","phone":null,"companyId":1,"address":null},{"id":10,"organName":"test4","parentId":1,"manager":"zs","phone":null,"companyId":1,"address":null},{"id":11,"organName":"2121","parentId":1,"manager":"212","phone":"13661725475","companyId":1,"address":null},{"id":12,"organName":"212121212","parentId":2,"manager":"212","phone":"12121","companyId":1,"address":null},{"id":13,"organName":"www","parentId":11,"manager":"ww","phone":"123","companyId":1,"address":null},{"id":14,"organName":"www","parentId":11,"manager":"ww","phone":"123","companyId":1,"address":null},{"id":15,"organName":"","parentId":null,"manager":"","phone":"","companyId":1,"address":null},{"id":16,"organName":"21212","parentId":null,"manager":"","phone":"","companyId":1,"address":null},{"id":17,"organName":"2131314","parentId":null,"manager":"","phone":"","companyId":1,"address":null},{"id":18,"organName":"q313","parentId":2,"manager":"","phone":"","companyId":1,"address":null}]}}

![6948f39a268fd5db32a61b4a33ed4a28.gif][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[6948f39a268fd5db32a61b4a33ed4a28.gif]: /images/20221023/d82288904e034971b66481e8576c492b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221023/03b9e0013a1e4cfa80c616657a176f3b.png