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子表单效果修改

使用环境

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

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];}

AVUE一些简单用法——avue-crud子表单相关推荐

avue主、子表单自定义图片上传
前言最近新需求要使用vue框架,并且在主.子表单中实现图片上传显示功能. 定义slot插槽主表单 action 随便写, :file-list 为主表单图片绑定属性,必须为数组,如: [{name ...
如何用ChemFinder制作子表单
通过使用ChemFinder这一插件,用户可以建立自己的ChemFinder数据库,数据库是由表单集合而成,所以建立数据库的前提是要制作表单.在之前的教程中已经介绍了制作表单的方法,本节ChemDra ...
真正简单的基于prototype的表单验证
由 searchadmin 于周二, 10/16/2007 - 06:44 提交. 真正简单的基于prototype的表单验证 tag:prototype 数据验证表单验证 validator j ...
【JEECG技术博文】简单实例讲解JEECG ONLINE表单权限控制（jeecg3.6）
简单实例讲解JEECG ONLINE表单权限控制(jeecg3.6) 原文:http://blog.itpub.net/30066956/viewspace-1872409/ 相关博文: ...
c语言写自动填写表单提交,利用C语言实现POST数据包如此简单【模拟网页提交表单】...
http://www.maben.com.cn/archives/212.html 利用C语言实现POST数据包如此简单[模拟网页提交表单] //*************************** ...
domino子表单html,使用Domino表单构建Web页面.ppt
使用Domino表单构建Web页面大纲 Domino表单和HTML页面之间的关系 Notes元素在Web上HTML代码转换熟悉DominoDesignerWeb开发环境设计表单前的必备知识如何 ...
一种简单好用的Vue表单验证
前言需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求. 那让我们自己来写一个吧! 知识准备 v ...
简单记录一下金蝶动态表单插件
动态表单模型是通过插件代理实现业务逻辑,对外部的接口主要是插件,这些接口可以提供给二次开发使用. 命名空间Kingdee.BOS.Core.DynamicForm.PlugIn 主要类及说明: [tr ...
易飞ERP--电子表单派班中心异常Illegal EasyFlow Account !-resak001
原因:用户编号在EasyFlow(易飞电子签核系统)里不存在! 解决措施:在EasyFlow创建用户编号对应的电子签核账户. 欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown ...

AVUE一些简单用法——avue-crud子表单

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

使用环境

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

使用环境

AVUE一些简单用法——avue-crud子表单相关推荐

最新文章

热门文章