Vue 77 ，Element 10 ，Element中的选择器组件Select，一级选择器组件el-select

原创已于 2024-11-11 20:54:45 修改 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

于 2024-07-03 09:40:23 首次发布

Vue 同时被 2 个专栏收录

90 篇文章

订阅专栏

Element

16 篇文章

订阅专栏

在Element UI中，ElSelect（或简称Select）组件是用于从预定义选项中，选择一个或多个值的强大工具。它支持远程搜索、多选等功能，提供优秀的用户体验和高度的灵活性。简洁易用的API设计，使我们能够快速集成，并实现复杂的选择逻辑。

一. 属性介绍

二. 定义参数

三. 默认事件

四. 自定义事件

五. 更多操作

前言

在Element UI中，ElSelect（或简称Select）组件是用于从预定义选项中，选择一个或多个值的强大工具。它支持远程搜索、多选等功能，提供优秀的用户体验和高度的灵活性。简洁易用的API设计，使我们能够快速集成，并实现复杂的选择逻辑。

实现效果：

一. 属性介绍

组件和属性配置和介绍，请看

<el-select
               v-model="policeValue"
               placeholder="请选择"
               clearable
               multiple 
               @change="handleSelectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
</el-select>


  <!-- el-select选择器属性 -->

  clearable  清空图标
  multiple   选项多选
  v-model="policeValue"            绑定报警类型的值到`policeValue`数据属性上
  placeholder="请选择"              设置默认提示信息为"请选择"
  @change="handleSelectChange"     当选项发生变化时，触发`handleSelectChange`方法

  :key="item.value"                为每个选项分配唯一键，基于`item.value`
  :label="item.label"              显示的标签文本，来源于`item.label`
  :value="item.value"              选项的实际值，绑定到`item.value`

二. 定义参数

// loading状态
tableLoading: false,
// 报警类型的参数
policeValue: "",
// 报警类型的选项参数
options: [
        {
          value: 1,
          label: "错误报警",
        },
        {
          value: 2,
          label: "正确报警",
        },
        {
          value: 3,
          label: "重复报警",
        },
],

三. 默认事件

该事件选择时就会触发，写在el-select组件内部

handleSelectChange(value) {

      this.tableLoading = true;
      // console.log("选中的值:", value);
      // 查找与选中值对应的选项对象，
      // 这里的value是数字，不是我们需要的label，所以需要处理
      const selectedItem = this.options.find(
        (option) => option.value === value
      );
      // console.log(selectedItem);

      if (selectedItem.label) {
        // console.log("选中的标签:", selectedItem.label);
        // 在这里可以使用selectedItem.label进行进一步操作
        this.zhiAnParams.alarmType = selectedItem.label;  
        
        // 请求接口，获取数据
        zhianData(this.zhiAnParams, this.params).then((res) => {
          // console.log(res);
          if (res.code === 200) {
            this.tableLoading = false;
            const data = res.rows;
            this.tableData = data;
            this.total = res.total;
          }
        });
      }

      // 接下来，这里可以执行你需要的操作
},},

四. 自定义事件

这点击按钮时触发该事件

choseSearch() {
     
      //这里的this.selectedOptions是value数字，要想获取label需要处理数据
      const selectedOption = this.options.find(
        (option) => option.value === this.policeValue
      );
      // console.log(selectedOption.label);
      // 这里拿到当前项

      // 重新赋值  
      const bypassParams = {
        dateTime:
          this.timeValue1 === "" ? "2024-06-13 17:34:16" : this.timeValue1, //管制时间
        level: selectedOption.label, //管制等级:一级、二级、三级
      };
      // console.log(bypassParams);

},},