avue-crud使用心得

设置默认值

<avue-crud:option="option":table-loading="loading":data="data"     :page.sync="page":permission="permissionList":before-open="beforeOpen"  :before-close="beforeClose"v-model="form"ref="crud"@row-update="rowUpdate"@row-save="rowSave"@row-del="rowDel"@size-change="sizeChange"@refresh-change="refreshChange"@on-load="onLoad">
</avue-crud>

此处省略一些script标签里面的基本代码

    import {getList,getDetail,add,update,remove,getType,deletefilebypath} from "@/api/leave/applyleavetype";import { mapGetters } from "vuex";// import { content } from "html2canvas/dist/types/css/property-descriptors/content";export default {created() {},data() {const _this = this;//验证层级 只能有数字和 自定义验证表单var validateRank = (rule, value, callback) => {let reg_tel = /^(\d{2}.?)?\d{2}$/;if (!reg_tel.test(value)) {callback(new Error("层格式不正确"));} else {callback();}};return {loading: true,page: {pageSize: 10,currentPage: 1,total: 0},selectionList: [],option: {height: "auto",calcHeight: 30,tip: false,border: true,index: true,viewBtn: true,//查看按钮columnBtn: false, //隐藏右上角查看行按钮// dialogClickModel: false, //弹窗取消按钮// cancelBtnText: "quxia",searchMenuSpan: 6,selection: true,//表格最前面是否有勾选框align: "center",//表头文字居中（默认为居左）column: [{label: "层级",labelWidth: "30%",searchLabelWidth: "30%",search: true,prop: "levelCode",type: "input",placeholder: "请输入层级 例如：01.02",rules: [{required: true,message: "请输入正确的层级,例如：01.02",trigger: "blur",validator: validateRank}]},{label: "类型名称",searchLabelWidth: "30%",labelWidth: "30%",prop: "typeName",type: "input",search: true,rules: [{required: true,message: "请输入类型名称",trigger: "blur"}]},                    {label: "是否统计",searchLabelWidth: "30%",labelWidth: "30%",prop: "isCount",type: "select",search: true,dicData: [{label: "统计",value: "1"},{label: "不统计",value: "0"}],rules: [{required: true//是否必填}]},]},data: []};},computed: {},methods: {beforeOpen(done, type) {//根据类型 设置编辑时的状态const color = this.findObject(this.option.column, "color");//另外四项const isTimes = this.findObject(this.option.column, "isTimes");const days = this.findObject(this.option.column, "days");//如果打开窗口的类型为‘新增’  if (["add"].includes(type)) {//给this.form赋默认值 就能达到页面有默认值的效果this.form.leaveType = "0"; //新增时默认为‘请假类型’this.form.isCount = "1"; //新增时默认为‘统计’this.type = "0"; //默认type为0 为了方便查询父类型this.$set(color, "addDisplay", false);//在新增的时候展示this.$set(isTimes, "addDisplay", true); //在查看的时候显示this.$set(isTimes, "display", true);}//如果类型为‘编辑’和‘查看’if (["edit", "view"].includes(type)) {this.currentId = this.form.id;getDetail(this.form.id).then(res => {//当days返回数据为-1时将-1改为nullif (res.data.data.days == -1) {res.data.data.days = null;}//请假类型 if (this.form.leaveType === "0") {//在编辑的时候显示this.$set(isTimes, "editDisplay", true);this.$set(days, "editDisplay", true);          } else if (this.form.leaveType === "1") {//查看时不显示this.$set(isTimes, "display", false);             }});}done();},}}

findObject 发现结构对象

this.findObject是avue中封装的api，可对对象和数组深拷贝。

使用方法

var option = {column:[]}
var prop = this.findObject(option.column,'prop');
//在data中定义option 在option.column中配置对应的列
console.log(prop)//操作对象（某列）

this.$set(obj, key, value)

vue的方法，在avue之外也可以使用

target：表示数据源，即是你要操作的数组或者对象

key：要操作的的字段

value：更改的数据

const testObj ={name:'柒柒',age:18};
this.$set(testObj,name,'小饼干');//把对象testObj的属性name值改为‘小饼干’
console.log(testObj);//{name:'小饼干',age:18}

avue-crud常用属性说明

最详细的avue属性及使用详细介绍_小四是个处女座的博客-CSDN博客_avue

avue 插槽使用说明

avue框架的Scoped Slot自定义汇总_指标满载的博客-CSDN博客_avue slot-scope

avue-crud使用说明相关推荐

Avue Crud组件属性说明
Avue Crud组件属性说明表格配置 option:{title:'表格的标题',align:'center', // 表格列齐方式(left,right,center)menuAlign:'ce ...
AVUE crud upload组件示例
在项目中使用avue crud组件,其中用到了upload组件. 官网中关于upload的解释非常简单,需要仔细阅读参数配置含义. 给出示例: 表banner(轮播横幅图表)使用avue进行CRUD操 ...
后台集成解决方案 avue
简介 avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),它基于 Vue.js 和 element.它使用了最新的前端技术栈,权限验证,第三方网站嵌套等功能,很多功能还在开发 ...
avue去除table表格操作列
过程 1.在对应的option中将设置:menu: false 2.此时操作列没有了,但是可能会变成一个空列,那可能是你option里的column中的lable设置了width,此时把这些width ...
avue实现简单crud
avue的使用最近做的项目中接触到了一个新的框架感觉很好用所以推荐给大家~~ [简介] Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主 ...
avue中crud翻页器currentPage等修改数据，页面不同步问题
<avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"/ ...
avue table crud
<avue-crud:data="data" //数据:option="option" //配置@size-change="sizeChange ...
程序员接活利器，dataTable组件带你快速开发，摆脱CRUD
本文摘要 ·对于10,000元以下的外包项目,通常CRUD业务占据50%以上.每个项目虽然业务不同,但是对数据库中每个表的操作都是一定的.在做了n个项目之后,我觉得程序员不能无脑进行CRUD操作,这样 ...
element ui 二级菜单_基于avue和element-ui集成解决方案avue-cli
avue-cli是一款基于avue和element-ui完全开源.免费的企业后端产品前端集成解决方案,采用最新的前端技术栈,已经准备好了大部分的项目准备工作,你可以快速进行二次开发功能全局错误日志 ...

avue-crud使用说明

avue-crud使用心得

设置默认值

findObject 发现结构对象

this.$set(obj, key, value)

avue-crud使用说明相关推荐

最新文章

热门文章