ant-design-vue 的select下拉选项使用

Java&Develop

已于 2023-02-19 13:13:26 修改

阅读量734

点赞数

分类专栏： Java开发 VUE 文章标签： vue.js java 前端

于 2023-02-19 13:12:44 首次发布

本文链接：https://blog.csdn.net/weixin_48616345/article/details/129109643

版权

Java开发同时被 2 个专栏收录

247 篇文章 1 订阅

订阅专栏

VUE

67 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

代码实现

 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人">
          <a-select placeholder="选择负责人" v-decorator="[ 'principal' ]" :dropdownMatchSelectWidth="false">
            <a-select-option v-for="(item,index) in userList" :key="index" :value="item.id">
              {{ item.userName }}
            </a-select-option>
          </a-select>
        </a-form-item>

import {addDepot,editDepot,checkDepot,getUserList } from '@/api/api'

data () {
userList: [],
}

查询数据库下拉列表的值

methods:{
initUser() {
        getUserList({}).then((res)=>{
          if(res) {
            this.userList = res;
          }
        });
      }
}

加载页面初始化

created () {
      this.initUser()
    },

api.js 文件里面加入这个

const getUserList = (params)=>getAction("/user/getUserList",params);

后端代码

/**
     * 用户列表，用于用户下拉框
     * @param request
     * @return
     * @throws Exception
     */
    @GetMapping(value = "/getUserList")
    @ApiOperation(value = "用户列表")
    public JSONArray getUserList(HttpServletRequest request)throws Exception {
        JSONArray dataArray = new JSONArray();
        try {
            List<User> dataList = userService.getUser();
            if (null != dataList) {
                for (User user : dataList) {
                    JSONObject item = new JSONObject();
                    item.put("id", user.getId());
                    item.put("userName", user.getUsername());
                    dataArray.add(item);
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        }
        return dataArray;
    }

public List<User> getUser()throws Exception {
        UserExample example = new UserExample();
        example.createCriteria().andStatusEqualTo(BusinessConstants.USER_STATUS_NORMAL);
        List<User> list=null;
        try{
            list=userMapper.selectByExample(example);
        }catch(Exception e){
            JshException.readFail(logger, e);
        }
        return list;
    }

public static final byte USER_STATUS_NORMAL = 0;

   List<User> selectByExample(UserExample example);

 <select id="selectByExample" parameterType="com.jsh.erp.datasource.entities.UserExample" resultMap="BaseResultMap">
    select
    <if test="distinct">
      distinct
    </if>
    <include refid="Base_Column_List" />
    from jsh_user
    <if test="_parameter != null">
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null">
      order by ${orderByClause}
    </if>
  </select>