Avue属性及使用详细介绍

转载
原文链接：https://blog.csdn.net/xiaosi1413/article/details/117462451

option: {
          labelWidth： 20, //标签宽度
          gutter: 132, //间距
          card: true, //是否列表公用
          tabs: true, //开启选项卡
          tabsActive: 3, //选项卡个数
          emptyBtn: true, //是否显示清空按钮，默认true
          submitBtn: true, //是否显示提交按钮，默认true
          mockBtn: true, //是否开启模拟按钮，默认false
          submitText: '完成', //提交按钮文本
          addBtn: true, //添加按钮
          menuWidth:100,//按钮宽度
          menuAlign:'center',//按钮位置
          menuHeaderAlign:'center',//头位置
          viewBtn:true,//查看
          editBtn:false,//编辑
          delBtn:false,//删除
            copyBtn:true,//复制
          group: [{
            icon: 'el-icon-info',
            label: '分组1',
            collapse: false,
            prop: 'group1',
            column: [{
              label: '内容1',
              prop: 'text1',
            }]
          }, {
            icon: 'el-icon-info',
            label: '分组2',
            arrow: false,
            prop: 'group2',
            column: [{
              label: '选项卡2',
              prop: 'text2',
            }, {
              label: '选项卡3',
              prop: 'text3',
            }]
          }], //分组显示
          column: [{
            label: "用户名", //标签名称
            prop: "username", //值
            tip: '这是信息提示', //内容提示
            tipPlacement: 'left', //内容提示语位置
            labelTip: '我是一个标题提示语', //标签提示语
            labelTipPlacement: 'right', //标签提示语位置
            maxlength: 3, //最长
            suffixIcon: 'el-icon-tickets', //后图标
            prefixIcon: 'el-icon-tickets', //前图标
            format: 'yyyy-MM-dd', //时间显示格式化
            valueFormat: 'yyyy-MM-dd', //返回值时间格式化
            startPlaceholder: '时间日期开始范围自定义',
            endPlaceholder: '时间日期结束范围自定义',
            minlength: 2, //最短
            row: true, //独占一行
            prepend: 'http://', //后缀
            append: 'com', //前置，
            minRows: 8, //文本框最小行
            maxRows: 10, //文本框最大行
            showWordLimit: true, //显示剩余多少长度
            step: 2, //增加步数
            stepStrictly: true, //严格步数
            precision: 2, //小数点精度
            controlsPosition: '', //步数增加按钮位置
            labelPosition: 'top', //标签位置
            dataType: 'number', //数据类型
            span: 24, //宽度

            className: 'formClassName', //样式
            value: '默认值', //默认值
            type: "cascader", //input类型select下拉、cascade级联、tree树
            multiple;true, //是否可以选择多个，和select一起使用
            drag: true, //是否可以拖拽select中的结果类容
            all: true, //多选框时，是否全选
            border: true, //空心多选框
            min: 1, //限制选择数量
            max: 2,
            button: true, //按钮类型多选框
            dicData: {
              label: '有权限',
              value: 1
            },
            {
              label: '无权限',
              value: 0
            },
            {
              label: '禁止项',
              disabled: true, //禁止字典选择
              value: -1
            }, //数据字典
            dicUrl: `${baseUrl}/getProvince`, //网络字典URL
            dicFormatter: (data) => {
              data.forEach(ele => {
                ele.name = ele.name + '字典格式化'
              })
              data.unshift({
                name: '追加字典',
                code: -1
              })
              return data
            }, //字典格式化
            dicData: [{
                label: '热门城市',
                groups: [{
                  value: 'Shanghai',
                  label: '上海',
                  desc: '描述'
                }, {
                  value: 'Beijing',
                  label: '北京'
                }]
              }, //字典分组     props: {
              label: 'name',
              value: 'code'
            }, //指明字典数据对应关系
            validator: validatePass, //开启自定义校验，值为一个函数
            bind: 'deep.deep.deep.value', //数据双向绑定
            order: 1, //字段排序，降序排列
            component: 'elDivider', //组件名字
            event: {
              click: () => {
                this.$message.success('点击方法')
              },
            }, //点击方法
            params: {
              html: '
自定义html标签,点我触发方法
',
              contentPosition: "left",
            }, //组件参数
            change: ({
              value,
              column
            }) => {
              this.$message.success('change事件查看控制台')
              console.log('值改变', value, column)
            },
            click,
            focus,
            blur, //事件函数
            errorslot: true, //错误自定义卡槽
            labelslot: true, //标签自定义卡槽
            formslot: true, //内容自定义卡槽
            rules: [{ //校验
              required: true, //是否必须
              type: 'array', //数据类型
              message: "请输入用户名", //提示
              trigger: "blur", //出发事件
            }]
          }]
        }
      }
————————————————
转载
原文链接：https://blog.csdn.net/qq_44872773/article/details/124286707