前端多选下拉框默认选中

成熟的麦芽糖

于 2024-02-27 13:41:52 发布

阅读量390

点赞数 11

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/m0_72788309/article/details/136317488

版权

1.结构

<template>
  <div>
    <el-modal class="deliverables-modal" v-model="visible" title="新增文件" @on-cancel="onCancel" @close="onCancel" @on-ok="onOk" width="700px" destroy-on-close>
      <el-form v-if="form" ref="form" :model.sync="form" label-width="120px" :rules="rules">
        
          //这里
            <el-form-item label="审核人" prop="approvalName" required>
              <el-select v-model="form.approvalName" default-expand-tags multiple collapseTags>
                <el-option  v-for="item in approvalName"  :value="item.userId" :label="item.realName" :key="item.userId"> </el-option>
              </el-select>
              
            </el-form-item>
       
      
       
      </el-form>
    </el-modal>
  </div>
</template>

<script>

import {addDocumen,approval} from '@/api/zp-api/modules/document-library';

export default {
  components: {
    Upload,
  },
  props: {
    // visible: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      form: {
        //这里
        approvalName:[],

      },
 //这里
        approvalName:[],

      visible: false,
      rules: {
     
        approvalName: [{ required: true, message: '请选择审核人', }],
   
      },
    };
  },
  mounted() {
    this.getapproval();

  },
  methods: {
    show() {
      this.form= {
        approvalName:[]
      },
      this.form.approvalName = this.approvalName.map(item => item.userId); //这里
      this.visible = true;

    },
    onCancel() {
     
      console.log('🚀 ~ file: add-file.vue:69 ~ onCancel ~  this.visible:', this.visible);
    },
  
    getapproval(){
      approval().then((res) => {
      console.log("🚀 ~ file: add-file.vue:136 ~ approval ~ res:", res);
 //这里
this.approvalName=res;

      })
    },
 
    onOk() {
      this.$refs.form.validate((valid, validRes) => {
        if (valid) {
          // valid passed, do something
          const params = {
            // fileUrl:
            //   this.form.files && this.form.files.length
            //     ? {
            //         name: this.form.files[0].name,
            //         size: this.form.files[0].size,
            //         url: this.form.files[0].url,
            //         id: this.form.files[0].id,
            //       }
            //     : null,
              fileName:this.form.files && this.form.files.length
                ? this.form.files[0].name: null,
                fileUrl:
              this.form.files && this.form.files.length
                ? this.form.files[0].url: null,
                documentName: this.form.documentName,
                documentCategory:this.form.documentCategory,
        documentType:this.form.documentType,
        // approval_name:this.form.approvalName.realName,
        // approval_id:this.form.approvalName.userId,
        approval_name:this.form.approvalName,
        approval_id:this.approvalName.filter(item => this.form.approvalName.includes(item.userId)).map((item)=>item.realName)

,
              }
              console.log("🚀 ~ file: add-file.vue:157 ~ addDocumen ~ params:", params);

              addDocumen(params).then((res) => {
               console.log("🚀 ~ file: add-file.vue:173 ~ addDocumen ~ res:", res);
               
              	
              })
         
          this.$message.success('提交成功');
        } else {
          console.error('校验错误', validRes);
        }
      });
      console.log('🚀 ~ file: add-file.vue:74 ~ onOk ~   this.visible:', this.visible);
    },
    
  },
};
</script>

<style lang="scss" scoped>
</style>