当前位置：首页 > news >正文

vueui vxe-form 分享实现表单项的联动禁用，配置式表单方式的用法

news 2025/8/13 17:31:58

官网文档：https:/vxeui.com 实现表单项的联动禁用

在使用 vxe-form 时，有时候需要将表单项直接进行关联操作，比如某一项选择后，另外一项设置为禁用状态不可选择，使用插槽的话神容易实现，本章是分享配置式的联动用法

在这里插入图片描述

<template><div><vxe-form v-bind="formOptions" ><template #action><vxe-button type="reset">重置</vxe-button><vxe-button type="submit" status="primary">提交</vxe-button></template></vxe-form></div>
</template><script setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'const sexItemRender = reactive({name: 'VxeSelect',options: [{ label: '女', value: 'Women' },{ label: '男', value: 'Man' }],events: {change ({ data }) {const isDisabled = data.sex !== 'Women'roleItemRender.props.disabled = isDisabled}}
})const roleItemRender = reactive({name: 'VxeSelect',props: {disabled: true},options: [{ label: 'Develop', value: '1' },{ label: 'PM', value: '2' },{ label: 'Testing', value: '3' },{ label: 'Designer', value: '4' }]
})const startTimeItemRender = reactive({name: 'VxeDatePicker',props: {disabledMethod ({ date }) {const endTime = formOptions.data.endTimeif (endTime) {const eDate = XEUtils.toStringDate(endTime)return date >= eDate}return false}}
})const endTimeItemRender = reactive({name: 'VxeDatePicker',props: {disabledMethod ({ date }) {const startTime = formOptions.data.startTimeif (startTime) {const sDate = XEUtils.toStringDate(startTime)return date <= sDate}return false}}
})const formOptions = reactive({titleWidth: 120,titleAlign: 'right',data: {name: 'test1',nickname: '',sex: '',role: '',startTime: '',endTime: ''},items: [{ field: 'name', title: 'Name', span: 24, itemRender: { name: 'VxeInput' } },{ field: 'sex', title: 'Sex', span: 12, itemRender: sexItemRender },{ field: 'role', title: 'Role', span: 12, itemRender: roleItemRender },{ field: 'startTime', title: 'Start time', span: 12, itemRender: startTimeItemRender },{ field: 'endTime', title: 'End time', span: 12, itemRender: endTimeItemRender },{ align: 'center', span: 24, slots: { default: 'action' } }]
})
</script>