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 插槽使用说明

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