项目中遇到的一些前端的效果的展示

avue组件avue-crud配置自定义表单中的某个字段

avue组件avue-crud配置自定义表单中的某个字段

使用环境

编辑表单时，需要将一些字段展示为标签；
查找资料，看到有人做过同样的功能。

在column数组中配置了一个参数的prop就是外层template slot中的参数（要加上Form，比如prop叫name那么slot就要写nameForm）
avue-crud 写法

	<template slot-scope="{row}" slot="selfItemNameForm">
		<el-tag>{{row.selfItemName}}</el-tag>
	</template>

column 写法

	column: [
		{
			label: '',
			labelWidth: "auto",
			prop: "selfItemName",
			span: 24
		},
	]

效果展示：

avue组件avue-crud子表单效果修改

avue组件avue-crud子表单效果修改

使用环境

编辑表单时，只需要展示子表单，不需要对子表单进行新增、删除操作、不展示序号

column: [
	{
		label: '',
		prop: 'itemDataShow',
		labelWidth: "auto",
		type: 'dynamic',
		span: 24,
		children: {
			index: false,       //是否显示序号
			delBtn: false, // 行删除按钮
			addBtn:false, // 行新增按钮
			align: 'center',
			type:'form',
			headerAlign: 'center',
		}
	}
]

编辑表单时，只需要展示子表单，不需要对子表单进行折叠

group: [
	{
		arrow:false, //是否展示折叠箭头-效果
	}
]

编辑表单时，不需要lable，需要将输入框（现在是标签）最左侧展示，需要添加属性：labelWidth: “auto”,

column: [
	{
		labelWidth: "auto",
	}
]

根据时间段查询

设置获取查询参数

	<avue-crud             
    	:search.sync="search"
    >
    </avue-crud>

起止时间控件

	column: [
            {
              label: "起止时间",
              prop: "dateRange",
              search: true,// crud 需要加上这个属性才能在搜索框展示起止时间
              searchRange: true,
              hide: true,
              type: "daterange",
              format:"yyyy-MM-dd HH:mm:ss",
              valueFormat:"yyyy-MM-dd HH:mm:ss",
              startPlaceholder: '开始时间',
              endPlaceholder: '结束时间',
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
      ]

给起止时间添加默认值

data() {
      return {
		search: {
	          dateRange: getlastMonth()
	        },
        }
     }

获取起止时间：当前时间往前推一个月

	// 当前日期往前推一个月
export const getlastMonth = () => {
  let now = new Date();
  // 当前月的日期
  let nowDate = now.getDate();
  let lastMonth = new Date(now.getTime());
  // 设置上一个月（这里不需要减1）
  lastMonth.setMonth(lastMonth.getMonth());
  // 设置为0，默认为当前月的最后一天
  lastMonth.setDate(0);
  // 上一个月的天数
  let daysOflastMonth = lastMonth.getDate();
  // 设置上一个月的日期，如果当前月的日期大于上个月的总天数，则为最后一天
  lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate);
  let dateRange =  [
    GMTToStr(lastMonth),
    GMTToStr(now)
  ];
  return dateRange;
}

// 格式化日期
export const GMTToStr = (time) => {
  let date =  new Date(time);
  var fullYear = date.getFullYear();
  var month = date.getMonth() + 1;
  var _date = date.getDate();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  if(month < 10){month = '0'+month}
  if(_date < 10){_date = '0'+_date}
  if(hours < 10){hours = '0'+hours}
  if(minutes < 10){minutes = '0'+minutes}
  if(seconds < 10){seconds = '0'+seconds}
  return fullYear + '-' + month + '-' + _date + ' ' + hours + ':' + minutes + ':' + seconds
}

查询参数传递

	if(this.search.dateRange && this.search.dateRange.length > 0){
      this.query.dateRangeStart = this.search.dateRange[0];
      this.query.dateRangeEnd = this.search.dateRange[1];
    }