记录

Select下拉列表实现

  • 2022-08-08
  • 作者 我爱小小蝶
  • ~2.46K 字
  1. 1. 示例一：
  2. 2. 示例二：
    1. 2.1. setup语法糖：
    2. 2.2. 测试截图：
  3. 3. 总结：

示例一：

以分类的表数据为例，

组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <el-select v-model="value" size="large">
    <el-option
      v-for="item in state.sort"
      :key="item.sort_name"
      :value="item.sort_name"
      @click="clickme(item.sort_name)"
    />
  </el-select>
  <!-- {{ state.sort }} -->
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";

const value = ref("请输入..");

const state = reactive({
  sort: [],
});

function init_data() {
  axios
    .get("/xx/sort")
    .then((respon) => {
      console.log(respon.data.data);
      state.sort = respon.data.data;
    })
    .catch((error) => {
      console.log(error);
    });
}
init_data();

function clickme(params) {
  console.log(params);
}
</script>

结果截图：

示例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-descriptions-item label="号别">
       <el-select
         v-model="state.register.regist_level_id"
         placeholder="请选择"
         size="large"
         @change="registerLevelChange"
       >
         <el-option
           v-for="item in state.register_level"
           :key="item.id"
           :value="item.id"
         >
         </el-option>
       </el-select>
     </el-descriptions-item>

setup语法糖：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 // 挂哪个级别的号
  register_level: [],
      
      
 getRegistLevelList().then((resp) => {
    state.register_level = resp;
  });    


//选择不同的号别 触发的change事件
function registerLevelChange(noonValue) {
  state.register.is_book = false;
  for (let item of state.register_level) {
    if (noonValue == item.sequence_no) {
      state.register.regist_money = item.regist_fee;
      state.register.total_number = item.regist_quota;
    }
  }
}

//是否选择购买病历本
function registerIsbookChange(params) {
  if (state.register.is_book) {
    state.register.regist_money = state.register.regist_money + 1;
  } else {
    state.register.regist_money = state.register.regist_money - 1;
  }
}

测试截图：

总结：

label——这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
value——这是你点击某个label(option)之后，将对应的值给v-model绑定的值model
key—— 这个呢相当于身份令牌，唯一的，防止出错，虽然没有也行，但是官网推荐还是加上为好。