vue封装下拉框组件

vue文件

vue 复制代码
<template>
  <el-select clearable
             :collapse-tags="collapseTags"
             :multiple="multiple"
             v-bind="$attrs"
             :placeholder="placeholder"
             :spellcheck="false"
             style="width: 100%"
             v-on="$listeners"
  >
    <el-option v-for="item in options" :key="item.itemCode" :label="item.label" :value="item.value"/>
  </el-select>
</template>

<script>


import {getDictItemByDictCode} from "@/api/dictItemManagement";

export default {
  name: 'HmSelectCode',
  props: {
    codeid: {
      type: String,
      required: false,
      default: '',
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapseTags: {
      type: Boolean,
      required: false,
      default: true,
    },
    placeholder: {
      type: String,
      required: false,
      default: '',
    }
  },
  data() {
    return {
      title: '组件标题',
      currentDesc: '',
      // 组件内输入框的值
      currentValue: '',
      options: [],
    }
  },
  mounted() {
    if (!this.codeid) return
    //调用后端接口
    getDictItemByDictCode(this.codeid).then(res => {
      this.options = []
      res.data.forEach((value1,) => {
        const option = {value: value1.itemCode, label: value1.itemName}
        this.options.push(option)
      })
    })
  },
  methods: {
    init() {
    },
  },
}
</script>

main.js

js 复制代码
import HmSelectCode from './components/HmSelectCode'
Vue.component('HmSelectCode', HmSelectCode)

使用

vue 复制代码
<HmSelectCode 
                v-model="queryForm.isDepartment" 
                codeid="sys_isDepartment" 
                placeholder="请选择机构部门"
 />
相关推荐
一抓掉一大把1 分钟前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡1 分钟前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript
Sahas10193 分钟前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
anyup9 分钟前
借助 Trae 从 0 到 1 实现海外地图渲染(leaflet + OSM)
前端·数据可视化·trae
六边形66612 分钟前
JavaScript 中本地对象、内置对象、宿主对象的区别与作用
前端·javascript
snakeshe101017 分钟前
深入解析React Hooks:useState与useReducer的区别与实现
前端
程序员韩立20 分钟前
现代全栈开发:Next.js与Node.js实战指南
前端·后端
航Hang*23 分钟前
WEBSTORM前端 —— 第2章:CSS —— 第2节:文字控制属性与CSS特性
前端·css·css3·html5·webstorm
小桥风满袖26 分钟前
Three.js-硬要自学系列18 (模型边界线、几何体顶点颜色、网格模型颜色渐变)
前端·css·three.js
JHC00000026 分钟前
DrissionPage 请求一次换一个代理(不重启chrome)
前端·chrome