avue-crud使用说明
avue-crud使用说明
·
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改为null
if (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 插槽使用说明
更多推荐
已为社区贡献1条内容
所有评论(0)