elementUI中级联选择器的使用

elementUI中级联选择器的使用_第1张图片
项目中经常有遇到级联选择的问题,于是总结一下使用方法
elementUI中级联选择器的使用_第2张图片
这边可以看到当选择完之后会以一个数组的形式保存在form中,但是,其实我们只需要数组的最后一位.
elementUI中级联选择器的使用_第3张图片
发现可以正常显示,注意此处classifyId的取值一定要为字符串,如果为数字,则不显示
elementUI中级联选择器的使用_第4张图片
当我们提交表单时,需要处理一下将classify这个数组转为字符串(取数组的最后一位),不然编辑时可能有问题

submit () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let opFun
                    // 将数组转为取值最后一位的字符串
                    let classifyId = this.form.classifyId
                    if (classifyId instanceof Array) {
                        classifyId = classifyId[classifyId.length - 1]
                    }
                    Object.assign(this.form, {
                        classifyId
                    })
                    // console.log(this.form)
                    // return
                    //在此处可以打印一下this.form,发现classifyId在表单中是数组,但是提交时会打印为字符串
                    if (this.form.id) {
                        opFun = update
                    }
                    else {
                        opFun = add
                    }
                    opFun(this.form).then(() => {
                        this.open = false
                        this.$message.success('操作成功')
                        this.getListByPage()
                    })
                } else {
                    return false
                }
            })
        }

在此处,操作已经完成,这都是建立在后台不给你传数组的情况下,如果他可以将classifyId这个数组

你可能感兴趣的:(前端)