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

五 组件在 main.js 中注册

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

六 父组件布局

七 数据定义

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

八 事件处理

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