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

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

（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);
//item.label:名称；如果item中还需要别的信息，在数据源里加属性，在这里获取item，然后调用。
  }

4.默认提示项展示：

第一种办法：先设置placeholder的内容，然后将selectedBlockId 默认值设为undefined或者null,页面上placeholder的内容才会出来。

const selectedBlockId = ref(undefined);
or
const selectedBlockId = ref(null);


### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

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