vue中form表单禁用专用组件介绍
更新时间:2024年01月16日 08:39:24 作者:是文静的
这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
form表单禁用专用组件
JFormContainer.vue
<template> <div :class="disabled?'jeecg-form-container-disabled':''"> <fieldset :disabled="disabled"> <slot name="detail"></slot> </fieldset> <slot name="edit"></slot> <fieldset disabled> <slot></slot> </fieldset> </div> </template>
<script> /** * 使用方法 * 在form下直接写这个组件就行了, *<a-form layout="inline" :form="form" > * <j-form-container :disabled="true"> * <!-- 表单内容省略..... --> * </j-form-container> *</a-form> */ export default { name: 'JFormContainer', props: { disabled: { type: Boolean, default: false, required: false } }, mounted () { console.log('我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用') } } </script>
<style> .jeecg-form-container-disabled{ cursor: not-allowed; } .jeecg-form-container-disabled fieldset[disabled] { -ms-pointer-events: none; pointer-events: none; } .jeecg-form-container-disabled .ant-select{ -ms-pointer-events: none; pointer-events: none; } .jeecg-form-container-disabled .ant-upload-select{display:none} .jeecg-form-container-disabled .ant-upload-list{cursor:grabbing} .jeecg-form-container-disabled fieldset[disabled] .ant-upload-list{ -ms-pointer-events: auto !important; pointer-events: auto !important; } .jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete, .jeecg-form-container-disabled .ant-upload-list-item .anticon-close{ display: none; } </style>
<template> <a-form layout="inline" :form="form" > <j-form-container :disabled="true"> <!-- 表单内容省略..... --> <a-row class="form-row" :gutter="16"> <a-col :lg="10" :md="10" :sm="20"> <a-form-item label="文件"> <a-button> <a-icon type="upload" /> 上传 </a-button> </a-form-item> </a-col> </a-row> <a-row class="form-row" :gutter="16"> <a-col :lg="10" :md="10" :sm="20"> <a-form-item label="文件"> <a-button> <a-icon type="upload" /> 上传 </a-button> </a-form-item> </a-col> </a-row> </j-form-container> </a-form> </template>
<script> import JFormContainer from '@/components/jeecg/JFormContainer' export default { components: { JFormContainer }, data () { return { form: this.$form.createForm(this) } }, methods: {} } </script> <style scoped> </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08vite+vue3.0+ts+element-plus快速搭建项目的实现
本文将结合实例代码,介绍vite+vue3.0+ts+element-plus快速搭建项目的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-06-06
最新评论