antd vue 选择控件的使用

news2025/1/16 19:50:13

Ant Design Vue-------Select 选择器

今天就讲讲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.宽度设置：style属性；

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

3.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 };
          });
}

4. change事件：

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

5. 先设置placeholder的内容，然后将selectedBlockId 默认值设为undefined或者null,页面上placeholder的内容才会出来。

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

还有一种办法（vue官网上学习到的）：

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

效果如图：即：提供一个空值的禁用选项。如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。