ant design vue选择器select的使用（详细）_ant design vue select

概要

这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图：

具体实现过程：

写好前端样式

1. 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果
2. 看一下 a-select 中的参数，label-in-value 是把每个选项的 label 包装到 value 中，这样的话下面：default-value 后面我们指定的格式就是{key：}，key 后面对应的值是多少，我们选择框的默认值就是多少，通过 value 来指定对应的值。因为我们选择下拉框需要保持选择不变，所以此时我们需要设置动态的默认值，因为我这里有三个选项，所以后面利用了三目选择表达式。

<template  slot="first_ispass" slot-scope="text,record">
      <a-select
        label-in-value
        :default-value="{ key: record.first_ispass==0?'0':(record.first_ispass==1?'1':'2') }"
        style="width:80px"
        @change="changefirstpass($event,record)"
      >
          <a-select-option  value="2">
              待定
          </a-select-option>
          <a-select-option  value="1">
              通过
          </a-select-option>
          <a-select-option  value="0">
             不通过
          </a-select-option>
       </a-select>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

完成 js 部分

1.在 a-select 中添加事件@change，在选择框value值改变的时候会触发此事件，因为我这里需要传两个值，一个是value值，一个是这一行的数据值，所以用 @change=“changefirstpass($event,record)” 写法传两个参数
2.最后写对应的触发函数，获取到我们需要的值，然后向后端接口发送请求完成操作

async changefirstpass ($event,record) {
      this.fp.student_id = record.student_id,
      this.fp.first_ispass = $event.key
      // 网络请求
      const { data: res } = await first_ispassApi(this.fp);
      this.$message.success('更新成绩状态成功！')
      this.getUserList()
    },
1
2
3
4
5
6
7
8