Element中的选择器组件Select （一级选择组件el-select）

news2024/12/23 8:32:24

简述：在 Element UI 中，`ElSelect`（或简称为 `Select`）是一个非常常用的选择器组件，它提供了丰富的功能来帮助用户从一组预定义的选项中选择一个或多个值。这里来简单记录一下

一. 组件和属性配置

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




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

},