elementui或AVUE框架如何表单属性的关联控制：如隐藏/显示

gplzx110

已于 2023-07-17 10:26:29 修改

阅读量788

点赞数 1

文章标签： elementui 前端 javascript

于 2023-07-14 17:39:11 首次发布

本文链接：https://blog.csdn.net/gplzx110/article/details/131728772

版权

文章介绍了如何通过column的control方法来实现表格和表单的动态控制。示例中展示了如何根据switch选择值(-1或3)来决定产品角色字段是否显示。此外，还提到了form对象可以用于控制表单中的其他字段，如设置form.text1的值。

摘要由CSDN通过智能技术生成

解决思路：通过column的control方法

示例如下：

column: [
        {
          label: '',
          prop: 'roleType',
          addDisplay: true,
          viewDisplay: true,
          search: true,
          editDisplay: true,
          tip: '注：非实体产品不允许出入库',
          hide: true,
          span: 8,
          type: 'switch',
          dicData: [
            {
              label: '实体',
              value: '-1'
            },{
              label: '非实体',
              value: '3'
            }
          ],
          props: {
            label: 'label',
            value: 'value'
          },
          rules: [
            {
              required: true,
              message: '请选择产品角色',
              trigger: 'blur'
            },
          ],
          control: (val,form) => {// 字段控制器
            form.text1 = 'test'
            if(val=='-1'){
              return {
                role:{
                  display: true
                }
              }
            }else {
              return {
                role:{
                  display: false
                }
              }
            }
          },
        },
        {
          label: '产品角色',
          prop: 'role',
          display: true,
          search: true,
          hide: true,
          span: 8,
          type: 'select',
          multiple: true,
          dicUrl: '/upms/dict/type/product_role',
          props: {
            label: 'label',
            value: 'value'
          },
          rules: [
            {
              required: true,
              message: '请选择产品角色',
              trigger: 'blur'
            },
          ]
        },
      ]

并且可以通过“control: (val,form) => {// 字段控制器”form来控制表单中的字段

control: (val,form) => {// 字段控制器
form.text1 = 'test'

}

注意：text1在form属性中必须定义