el-select 自定义组件下拉框_el-select自定义下拉框

一 展示效果

1 新增效果

列表数据正常

2 修改效果

回显正常。

二 数据库设计

CREATE TABLE `dosage_dict` (
  `ID` varchar(32) NOT NULL COMMENT '主键ID',
  `CREATE_USER` varchar(100) DEFAULT NULL COMMENT '创建人',
  `CREATE_TIME` datetime DEFAULT NULL COMMENT '创建时间',
  `UPDATE_USER` varchar(100) DEFAULT NULL COMMENT '更新人',
  `UPDATE_TIME` datetime DEFAULT NULL COMMENT '更新时间',
  `DOSAGE` varchar(100) NOT NULL COMMENT '剂型',
  `DOSAGE_CLASS` varchar(100) NOT NULL COMMENT '剂型分类',
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='剂型字典';

三 后端返回的下拉列表数据

四 自定义组件

1 位置

2 代码

<template>
  <div class="areaSelect flex">
    <!-- 剂型选择框 -->
    <el-select
      filterable
      :disabled="false"
      v-model="dosageId"
      :size="''"
      placeholder="请选择"
      @change="changeDosage($event)">
      <el-option
        v-for="dosage in dosageList"
        :key="dosage.id"
        :label="dosage.dosage+'_'+dosage.dosageClass"
        :value="dosage.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    name: 'dosageSelect',
    props: {
      dosageId: {
        type: String
      },
      dosage: {
        type: Object,
        default: () => {
          return {
            dosageId: ''
          }
        }
      }
    },
    data () {
      return {
        dosageList: []
      }
    },
    mounted () {
      this.getDosageList()
    },
    methods: {
      resetProvince () {
        this.province = ''
      },
      changeDosage (data) {
        debugger
        if (this.dosageId !== '') {
          this.$emit(
            'dosage', [{
              dosageId: this.dosageId
            }]
          )
        }
      },
      // 从后台获得剂型数据
      async getDosageList () {
        let url = '/base/dosageDict/queryAll'
        let data = await this.$http.get(url)
        this.dosageList = data.data.list
      }
    }
  }
</script>

五 组件在 main.js 中注册

// 剂型选择
import DosageSelect from './components/dosageSelect'
// 剂型选择
Vue.use(DosageSelect)
// 剂型选择
Vue.component('dosageSelect', DosageSelect)

六 父组件布局

<el-form-item label="剂型" prop="dosageId">
  <dosageSelect
    :dosageId="dataForm.dosageId"
    @dosage="changeDosage($event)"
    v-if="true"
    ref="selectDosage"
  ></dosageSelect>
</el-form-item>

七 数据定义

dataForm: {
  id: 0,
  dosageId: ''
},

八 事件处理

// 剂型框改变时，传递出来已选择的剂型Id
changeDosage (data) {
  debugger
  this.dataForm.dosageId = data[0].dosageId
}