The use of ant design vue selector select (detailed)

overview

This time, I am writing the background of a community recruiting applet based on ant design vue. Because it involves three status descriptions of members (not/passed, pending), it is implemented here using select, and clicking the drop-down box to select will trigger the corresponding The function of changing the database data is reflected to the applet side. Today, let's talk about the use of select and the binding of the corresponding trigger function. Let's take a look at the effect diagram of the implementation:

The specific implementation process:

Write the front-end style

1. For the use of components, we can first go to the official website document to find the effect we want to achieve ( official document portal ). This time we use the style of the option text, and then change the parameters to write the effect we want.
2. Take a look at the parameters in a-select, label-in-value is to wrap the label of each option into value, so the following: The format we specify after default-value is {key:}, and the corresponding value after key is How much, the default value of our selection box is how much, and the corresponding value is specified by value. Because we need to keep the selection unchanged when selecting the drop-down box, we need to set the dynamic default value at this time, because I have three options here, so I use the ternary selection expression later.

<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>

complete the js part

1. Add the event @change to a-select, this event will be triggered when the value of the selection box changes, because I need to pass two values ​​here, one is the value value and the other is the data value of this row, so use @ change="changefirstpass($event,record)" The writing method passes two parameters
2. Finally, write the corresponding trigger function, get the value we need, and then send a request to the back-end interface to complete the operation

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()
    },