效果：發(fā)布type為shp時(shí) 數(shù)據(jù)相關(guān)的都隱藏，當(dāng)發(fā)布type為postgis時(shí)則顯示

?

1.avue表單綁定值

html

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

?js data中定義

 data() {
        return {
            publishForm: {},
            option: {
                labelWidth: 120,
                column: [
                    {
                        label: '發(fā)布Type',
                        prop: 'publishType',
                        type: 'select',
                        dicData: [{
                            label: 'shp',
                            value: 'shp'
                        }, {
                            label: 'postgis',
                            value: 'postgis'
                        }]
                    },
                    {
                        label: '數(shù)據(jù)庫地址IP',
                        prop: 'dataBaseIp',
                        display: false,
                    },
                    {
                        label: '數(shù)據(jù)庫密碼',
                        prop: 'dataBasePassword',
                        display: false,
                    },
                    {
                        label: '數(shù)據(jù)賬號(hào)',
                        prop: 'dataAccount',
                        display: false,
                    },
                    {
                        label: '數(shù)據(jù)庫名',
                        prop: 'dataBaseName',
                        display: false,
                    },
                ]
            }
        }
    },   

?publishForm中就是表單中收集的值，后面將其中的數(shù)據(jù)與后端交互。

2.avue表單項(xiàng)根據(jù)某項(xiàng)的值去聯(lián)動(dòng)顯隱

  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
            }
        }
    },

注意：其中要顯隱的表單項(xiàng)要給一個(gè)display初始狀態(tài)值。

實(shí)現(xiàn)avue表單項(xiàng)根據(jù)某項(xiàng)的值 去聯(lián)動(dòng) 其他表單項(xiàng)下拉也是同理：

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切換與另外一個(gè)select的options聯(lián)動(dòng)

               {
                        label: "發(fā)布空間",
                        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: "請(qǐng)選擇發(fā)布空間",
                            trigger: "change"
                        }],
                    },
                    {
                        label: "圖層樣式 ",
                        prop: "shpStyle",
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dicData: [],
                        rules: [{
                            required: true,
                            message: "請(qǐng)選擇圖層樣式",
                            trigger: "change"
                        }],
                    },

props

dicData

先后順序不能變 否則會(huì)報(bào)錯(cuò)文章來源地址http://www.zghlxwxcb.cn/news/detail-558241.html

到了這里，關(guān)于avue 表單綁定值；avue表單項(xiàng)根據(jù)某項(xiàng)的值去聯(lián)動(dòng)顯隱或是聯(lián)動(dòng)下拉數(shù)據(jù)；avue select切換與另外一個(gè)select的options聯(lián)動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！