前端el-select 单选和多选

el-select单选

"部门名称" 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>

 :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多选

"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>

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

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

"primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定
 
 
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'] = dutyDepartId
        return _data;
      },

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

 "text" @click="addOrUpdateHandle(scope.row.id)">编辑
 
 
addOrUpdateHandle(id, isDetail) {
        this.formVisible = true
        this.$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
      },