前端el-select 单选和多选

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

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

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

 确 定


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

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

 编辑


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