vben BasicTable的查询条件和重置查询按钮的排序规则以及RangePicker选择时间范围时如何处理

最新推荐文章于 2024-05-18 22:08:03 发布

Call.me宝宝

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量1k

点赞数

文章标签：前端 anti-design-vue vue.js

本文链接：https://blog.csdn.net/weixin_44227793/article/details/131417243

版权

BasicTable带查询条件时,查询条件和查询按钮的排序规则是：
（24 / 第一个查询条件的span）- 2 || 0
根据需要调整第一个查询条件的span来保证 确认/重置 按钮的位置不会错乱
关于RangePicker的一些用法（限制日期范围）

//定义的查询条件
 const formConfig: Partial<FormProps> = {
    schemas: [
    {
        labelWidth: 100,
        field: 'date',
        component: 'RangePicker',
        label: '时间范围：',
        defaultValue: [moment().startOf('days'), moment().endOf('days')],
        colProps: {
          span: 6,
        },
        componentProps: {
          separator: '至',
          placeholder: '请选择时间范围',
          showTime: false,
          allowClear: false,
          inputReadOnly: true,
          style: { width: '100%' },
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      }
     ],
    showAdvancedButton: true,
    autoAdvancedLine: 1,
    // 配置所有 Row 的 style 样式
    baseRowStyle: {},
  };
  //定义选择时绑定的时间（用于判断时间范围）
	let rangeTime: any[] = [];
	//由于查询条件的表单是写在setup之外所以要在onBeforeMount中去设置RangePicker的一切判断事件以及禁选事件，如果是在setup内部可以把这一步定义在查询表单中
	onBeforeMount(async () => {
        getForm().updateSchema([
        
          {
            field: 'date',
            componentProps: {
              disabledDate: (current) => {
                if (!rangeTime || rangeTime.length === 0) {
                  return false;
                }
                const diffDate = current.diff(rangeTime[0], 'days');
                return Math.abs(diffDate) > 30;
              },
              onCalendarChange: (val) => {
                rangeTime = val;
              },
            },
          },
        ]);
      });