前端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'] = dutyDepartId
        return _data;
      },

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

 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>


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
      },