前端el-select 单选和多选

el-select单选

<el-form-item label="部门名称" prop="departId"><el-select v-model="dataForm.departId" placeholder="请选择" clearable:style='{ "width": "100%" }' :multiple="false" filterable :allow-create="true"@change="departIdChange"><el-option v-for="(item, index) in departIdOptions" :key="index" :label="item.fullName":value="item.id"></el-option></el-select>
</el-form-item>

 :multiple="false"  表示不能多选只能单选

//部门名称赋值departIdChange(val) {let obj = {};obj = this.departIdOptions.find((item) => {return item.id === val;});this.dataForm.departName = obj.fullName;},

departIdOptions: [{id: '国网上海超高压公司运检部', fullName: '国网上海超高压公司运检部'},{id: '变电运维中心', fullName: '变电运维中心'},{id: '变电检修中心', fullName: '变电检修中心'},{id: '输电运检中心', fullName: '输电运检中心'},{id: '智能运检管控中心', fullName: '智能运检管控中心'},],

el-select多选

<el-col :span="11"><el-form-item label="责任部门" prop="dutyDepartId"><el-select v-model="dataForm.dutyDepartId" placeholder="请选择" clearable:style='{ "width": "100%" }' :multiple="true" filterable :allow-create="true"@change="dutyDepartIdChange"><el-option v-for="(item, index) in departIdOptions" :key="index" :label="item.fullName":value="item.id"></el-option></el-select></el-form-item>
</el-col>

:multiple="true" 表示允许多选 

在提交按钮中，因为有多选，所以需要对传到后端的数据进行处理        

<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定</el-button>dataFormSubmit() {this.$refs['elForm'].validate((valid) => {if (valid) {this.request()}})
},request() {var _data = this.dataList()
}/*** 数据格式化，将提交的表单数据转为JSON对象*/dataList() {var _data = JSON.parse(JSON.stringify(this.dataForm));let dutyDepartId = ""let arr = _data['dutyDepartId']dutyDepartId = arr.join(', ')_data['dutyDepartId'] = dutyDepartIdreturn _data;},

多选比单选多出来的操作：就是在编辑的时候，也需要通过 “,” 隔开     

 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>addOrUpdateHandle(id, isDetail) {this.formVisible = truethis.$nextTick(() => {this.$refs.JNPFForm.init(id, isDetail)})},

 

init(id, isDetail) {this.$nextTick(() => {if (this.dataForm.id) {this.loading = true//加载表单数据getListToEdit(this.dataForm.id).then(res => {this.dataInfo(res.data)this.loading = false})} });},dataInfo(dataAll) {let _dataAll = dataAll_dataAll['dutyDepartId'] = _dataAll['dutyDepartId'].split("、")this.dataForm = _dataAll},