基于element-ui的简单下拉框vue组件封装

本文介绍如何基于Element-UI封装一个简单的下拉框Vue组件,适用于前端查询页面从后端拉取数据展示。组件设计允许使用者通过props传递所需数据,并且后端查询逻辑可根据实际情况灵活调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 前端查询页面会有许多下拉框需要从后端拉取数据显示,考虑封装一个组件进行使用。

props中定义的是组件使用方可以传递的数据,组件封装比较简陋,从后端查询数据的代码可自行更改。

<template>
  <div>
    <el-select v-model="svalue" :placeholder="text" filterable>
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
 
<script>
import {
  loadDictionaryIdAndValueList,
  loadSubjectTypeIdAndNameList,
  loadCategoryIdAndNameList
} from "../../api/index";
export default {
  name: "tlSelect",
  data() {
    return {
      options: [],
      svalue: "",
      text: "",
      commonRequest: {
        requestHead: {
          version: "",
          businessType: "",
          deviceId: "",
          deviceType: "",
          encryption: ""
        },
        body: {}
      },
      fileType: {
        label: "name",
        value: "id"
      }
    };
  },
  methods: {
    //转换下拉框下的字段
    _dataTransform(data) {
      let _data = [];
      for (let i = 0; i < data.length; i++) {
        _data[i] = {};
        _data[i].label = data[i][this.fileType.label];
        _data[i].value = data[i][this.fileType.value];
      }
      return _data;
    }
  },
  watch: {
    //判断下拉框的值是否有改变
    svalue(val, oldVal) {
      if (val != oldVal) {
        this.$emit("input", this.svalue);
      }
    }
  },
  props: {
    selectType: {
      type: String
    },
    dictName: {
      type: String
    },
    value: {
      type: String
    },
    placeholder: {
      type: String
    }
  },
  mounted() {
    //初始话下拉框的值
    this.svalue = this.value;
    this.text = this.placeholder;

    let requestMethod = loadSubjectTypeIdAndNameList;
    let param = "";

    if (this.selectType === "SubjectCategory") {
      requestMethod = loadCategoryIdAndNameList;
    } else if (this.selectType === "SubjectType") {
      requestMethod = loadSubjectTypeIdAndNameList;
    } else if (this.selectType === "Dictionary") {
      requestMethod = loadDictionaryIdAndValueList;
      this.commonRequest.body = this.dictName;
      param = this.commonRequest.body;
      this.fileType = {
        label: "value",
        value: "id"
      };
    }

    requestMethod(param)
      .then(resp => {
        if (resp.responseHead.code === "0") {
          this.options = this._dataTransform(resp.body);
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

 

### 关于 Element-UI 中实现复合型下拉框的方法 Element-UI 并未直接提供一种名为“复合型下拉框”的组件,但可以通过组合其他基础组件来模拟其实现效果。以下是具体实现方式: #### 方法一:通过 `el-select` 和自定义按钮构建复合型下拉框 此方法利用了一个普通的 HTML 按钮与 `el-select` 组件相结合的方式[^1]。这种方式允许开发者自由定制显示样式以及交互逻辑。 ```html <div class="custom-combobox"> <button class="combo-btn">是否需要审核</button> <el-select v-model="formData.value1" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> <style scoped> .custom-combobox { display: flex; align-items: center; } .combo-btn { height: 36px; line-height: 36px; border: 1px solid #dcdfe6; background-color: #fafafa; padding: 0 30px; color: #525050; border-right: none; } ::v-deep .el-input__inner { border-radius: 0; border-left: none; } </style> ``` 在此示例中,`.combo-btn` 被用来作为描述性的前缀文本,而 `el-select` 则负责实际的选择功能。两者通过 CSS 进行布局调整以达到视觉上的统一效果[^1]。 --- #### 方法二:使用带有图标的按钮增强用户体验 如果希望进一步提升界面友好度,则可以在按钮或者选择器旁边加入图标支持。这不仅美观而且能够更直观地传达操作意图[^2]。 ```html <el-button type="primary" @click="toggleDropdown">{{ dropdownText }}<i class="el-icon-arrow-down el-icon--right"></i></el-button> <el-select ref="selectRef" v-model="selectedValue" style="display:none;" @change="onSelectChange"> <el-option v-for="(option, index) in selectOptions" :key="index" :label="option.label" :value="option.value"></el-option> </el-select> ``` 在这个例子里面,我们隐藏了默认的 `el-select` 显示形式并通过点击事件手动触发其弹窗展示行为。这样做的好处是可以完全控制外观设计并保持一致性[^2]。 --- #### 方法三:封装成独立 Vue 组件以便重用 对于复杂场景下的需求来说,可能还需要考虑如何简化代码结构从而提高可维护性和扩展性。此时就可以把前面提到的各种技巧打包进一个新的子组件里去[^3]。 ```javascript // MultiSelect.vue 文件内容省略... export default { props: ['modelValue', 'options', 'opFormat'], emits: ['update:modelValue'], }; ``` 调用时只需传入必要的参数即可完成配置工作: ```vue <multi-select v-model="point" :options="pointList" :opFormat="['name', 'value']" multiple /> ``` 以上三种方案各有优劣之处,在实际项目开发过程中可以根据具体情况灵活选用最合适的那一个。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值