使用elmui下拉框组件

<el-form-item prop="roleIdList" :label="$t(user.roleIdList)" class="role-list">
        <el-select v-model="dataForm.roleIdList" multiple :placeholder="$t(user.roleIdList)">
          <el-option v-for="role in roleList"
          :key="role.id"
          :label="role.name"
          :value="role.id">
          </el-option>
        </el-select>
      </el-form-item>

在date中添加接收

data () {
          
   
    return {
          
   
      visible: false,
      roleList: [],
      dataForm: {
          
   
        id: ,
        roleIdList: [],

在method中init

methods: {
          
   
    init () {
          
   
      this.visible = true
      this.$nextTick(() => {
          
   
        this.$refs.dataForm.resetFields()

        Promise.all([
          this.getRoleList()
        ]).then(() => {
          
   
          if (this.dataForm.id) {
          
   
            this.getInfo()
          }
        })
      })
    },

调用后端数据

// 获取角色列表
    getRoleList () {
          
   
      return this.$http.get(/sys/role/list).then(({
          
    data: res }) => {
          
   
        if (res.code !== 0) {
          
   
          return this.$message.error(res.msg)
        }
        this.roleList = res.data
      }).catch(() => {
          
   })
    },

改造

<el-form-item prop="calssify" label="任务分类" class="role-list">
        <el-select v-model="dataForm.classify" multiple placeholder="任务分类">
          <el-option v-for="task in taskList"
          :key="task.id"
          :label="task.name"
          :value="task.id">
          </el-option>
        </el-select>
      </el-form-item>

data () {
          
   
    return {
          
   
      visible: false,
      taskList: [],
      dataForm: {
          
   
        id: ,
        // roleIdList: [],
        name: ,
        contest: ,
        classify: ,
        creator: ,
        updaterDate: ,
        updater: ,
        createDate: 
      }
    }
  },

init () {
          
   
      this.visible = true
      this.$nextTick(() => {
          
   
        this.$refs.dataForm.resetFields()

        Promise.all([
          this.getTaskList()
        ]).then(() => {
          
   
          if (this.dataForm.id) {
          
   
            this.getInfo()
          }
        })
      })
    },

    // 获取任务类别列表
    getTaskList () {
          
   
      return this.$http.get(/sys/menu/list).then(({
          
    data: res }) => {
          
   
        if (res.code !== 0) {
          
   
          return this.$message.error(res.msg)
        }
        this.taskList = res.data
      }).catch(() => {
          
   })
    },