avue 表单绑定值；avue表单项根据某项的值去联动显隐或是联动下拉数据；avue select切换与另外一个select的options联动

原创已于 2023-07-13 16:34:09 修改 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #服务器 #前端

于 2023-07-11 16:00:01 首次发布

avue 专栏收录该内容

21 篇文章

订阅专栏

文章介绍了如何在Avue框架下，通过监听发布Type的值来动态控制数据库地址IP、数据库密码等字段的显隐，以及实现表单项的联动，如选择发布空间后自动更新图层样式的选项。同时提到了dicData和dicUrl的使用来更新下拉列表。

效果：发布type为shp时数据相关的都隐藏，当发布type为postgis时则显示

1.avue表单绑定值

html

<avue-form :option="option" v-model="publishForm"></avue-form>

js data中定义

 data() {
        return {
            publishForm: {},
            option: {
                labelWidth: 120,
                column: [
                    {
                        label: '发布Type',
                        prop: 'publishType',
                        type: 'select',
                        dicData: [{
                            label: 'shp',
                            value: 'shp'
                        }, {
                            label: 'postgis',
                            value: 'postgis'
                        }]
                    },
                    {
                        label: '数据库地址IP',
                        prop: 'dataBaseIp',
                        display: false,
                    },
                    {
                        label: '数据库密码',
                        prop: 'dataBasePassword',
                        display: false,
                    },
                    {
                        label: '数据账号',
                        prop: 'dataAccount',
                        display: false,
                    },
                    {
                        label: '数据库名',
                        prop: 'dataBaseName',
                        display: false,
                    },
                ]
            }
        }
    },

publishForm中就是表单中收集的值，后面将其中的数据与后端交互。

2.avue表单项根据某项的值去联动显隐

  watch: {
        'publishForm.publishType'() {
            if (this.publishForm.publishType === 'postgis') {
                const columnIp = this.findObject(this.option.column, "dataBaseIp")
                const columnPassword = this.findObject(this.option.column, "dataBasePassword")
                const columnAccount = this.findObject(this.option.column, "dataAccount")
                const columnName = this.findObject(this.option.column, "dataBaseName")
                columnIp.display = true
                columnPassword.display = true
                columnAccount.display = true
                columnName.display = true
            } else {
                const columnIp = this.findObject(this.option.column, "dataBaseIp")
                const columnPassword = this.findObject(this.option.column, "dataBasePassword")
                const columnAccount = this.findObject(this.option.column, "dataAccount")
                const columnName = this.findObject(this.option.column, "dataBaseName")
                columnIp.display = false
                columnPassword.display = false
                columnAccount.display = false
                columnName.display = false
            }
        }
    },

注意：其中要显隐的表单项要给一个display初始状态值。

实现avue表单项根据某项的值去联动其他表单项下拉也是同理：

const column = this.findObject(this.option.group, "roleId");

column.dicData = res.data.data;



const deptColumn = this.findObject(this.userOption.column, 'deptId')

deptColumn.dicUrl = `/api/blade-system/dept/select?userId=${userId}`

3.avue select切换与另外一个select的options联动

               {
                        label: "发布空间",
                        prop: "test",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=GIS_WORKSPACE",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        event: {
                            change: (val) => {
                                if (!val) return
                                if (val) {
                                    if (val == 'VECTOR') {
                                        this.typeValue = 'GIS_VECTOR_STYLE'
                                    } else if (val == 'IMAGE') {
                                        this.typeValue = 'GIS_IMAGE_STYLE'
                                    } else if (val == 'LARGE_SCREEN') {
                                        this.typeValue = 'GIS_LARGE_SCREEN_STYLE'
                                    }
                                    getDicData(this.typeValue).then((res) => {
                                        const column = this.findObject(this.option.column, "shpStyle")
                                        column.dicData = res.data.data
                                    })
                                }
                            },
                        },
                        rules: [{
                            required: true,
                            message: "请选择发布空间",
                            trigger: "change"
                        }],
                    },
                    {
                        label: "图层样式 ",
                        prop: "shpStyle",
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dicData: [],
                        rules: [{
                            required: true,
                            message: "请选择图层样式",
                            trigger: "change"
                        }],
                    },