avue的配置项之日期搜索范围;搜索栏日期范围;表单日期范围;type: ‘datetimerange‘搜索日期范围不生效;avue curd表单校验必填 自定义校验;

1.搜索栏日期范围

  • 组件类型 type: "datetime"

  • 日期范围 searchRange: true

{
    label: "开始时间",
    prop: "startTime",//关联的字段
    type: "datetime",//使用的组件类型
    isAdmin: true,//自定义属性
    search: true,//是否可以搜索
    searchRange: true,//控制搜索时是否是日期范围默认为false是单独的一天
    format: "yyyy-MM-dd HH:mm",
    valueFormat: "yyyy-MM-dd HH:mm:ss",
    rules: [
          {
             required: true,
             message: "请输入开始时间",
             trigger: "blur",
          },
       ],
},

2.表单日期范围;

  •  type: 'datetimerange'

{
    label: "时间日期范围",
    type: 'datetimerange',
    prop:'datetimerange',
    format:'yyyy-MM-dd HH:mm:ss',
    valueFormat:'yyyy-MM-dd HH:mm:ss',
    startPlaceholder: '时间日期开始范围自定义',
    endPlaceholder: '时间日期结束范围自定义',
}

在官网找了很久;后来发现这俩种配置项是不同的!

 3.curd表单校验必填,在options中进行配置

 {
        label: '手机号',
        span: 12,
        row: true,
        prop: 'phone',
        rules: [{
          required: true,//联想element-ui表单校验
          message: "请输入手机号",
          trigger: "blur"
        }]
 }

4.curd表单自定义校验(校验方法定义在data中)

data() {
    const checkRule = (rule, value, callback) => {
      if (value>1||value<0) {
        callback(new Error("请输入0-1之间的小数"));
        return;
      }
    }
    return {
      option: {
        column: [
          {
            label: "透明度",
            prop: "opacity",
            rules: [{
              required: true,
              message: "请输入透明度",
              trigger: "blur"
            },{
              validator: checkRule,
              trigger: "blur"
            }
            ],
          }
        ]
      },
    };
  },

 

你可能感兴趣的:(avue,javascript,前端框架)