antd vue select控件的使用_ant design vue 设置 a selector的高度

今天就讲讲Ant Design Vue下的控件----select 下拉框

结合项目中的需求，讲一下该控件如何配置，需求：

（1）设置控件的宽度和高度

（2）绑定数据源

（3）选中后获取名称

（4）默认提示项

模板中的代码如下:

<a-form layout="inline">
        <a-form-item label="区块"> <a-select placeholder="请选择区块" v-model:value="selectedBlockId" :options="BlockList" style="width: 220px" @change="handleSelectBlockChanged" /></a-form-item>
      </a-form>

1. 宽度和高度设置：

（1）宽度设置：style属性；

（2）高度设置： size=large，高度为40px; size=small，高度为24px,默认高度为32px

2.options绑定数据源，数据源中，key值为value, label，一般用map函数。

const selectedBlockId = ref('');
const BlockList = ref([] as any[]);
function queryBlockList(id) {
    let queryBlockJson = {};//往后端传值
    Query(queryBlockJson).then((res) => {//Query:API
          BlockList.value = res.map((item) => {
            return { value: item.interestId, label: item.blockName };
          });
}

3. 选中后，获取选中项的相关信息，利用change事件：

//根据选定的信息得到名称
  function handleSelectBlockChanged(val: string) {
    let item = BlockList.value.find((item) => item.value == val);
    console.log('item', item.label);


###  总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)