vue下拉框返回后端数据库数据

使用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(() => {})
    },