Django-Vue-Lyadmin

TIP

crud组件文件位于src/components/lycrud.vue中，由于作者只整理封装了自己经常用到的组件和属性，如果遇到缺少属性或组件的完全可以参考lycrud.vue文件模式自行添加DIY，上手简单

crudConfig 属性(选项式)

crudConfig:{
    //crud请求方法配置
    crudRequest:{
    },
    //搜索栏目配置
    searchBar:{
    },
    //显示分页
    showPagination:true,
    //分页配置
    pageparams: {
    },
    //crud按钮配置
    rowHandle:{
    },
    //crud弹窗属性
    formOptions: {
    },
    //crud表格属性
    tableOptions:{
    },
    showSelectable:true,//表格显示复选项框
    //table表头列
    tableColumns:[
    ],
},

crudRequest 增删改查网络请求

crudRequest:{
    add:UsersUsersAdd,
    del:UsersUsersDelete,
    edit:UsersUsersEdit,
    search:UsersUsers,
},

属性名	说明
add	新增请求API
del	删除请求API
edit	编辑请求API
search	查询/列表请求API

searchBar 搜索栏目配置

searchBar:{
    showSearchBar:true,//显示搜索栏目
    searchColums:[
        {label:'用户名',type:'input',prop:'username',width:200,maxlength:60,placeholder:'请输入用户名'},
        {label:'手机号',type:'input',prop:'mobile',width:200,maxlength:60,placeholder:'请输入手机号'},
        {label:'状态',type:'select',prop:'is_active',width:100,placeholder:'请选择',
            options:[
                {value:1,label:'正常'},
                {value:0,label:'禁用'}
            ]
        },
        {label:'创建时间',type:'datepicker-datetimerange',prop:'timers'},
    ]
},

属性名	说明
showSearchBar	是否显示搜索栏目（true\false）
searchColums	配置搜索内容

searchColums 配置搜索内容

属性名	说明
label	标题名
type	类型：input/select/datepicker-datetimerange（日期范围）
prop	字段名
width	宽度
maxlength	input类型时的最大长度
placeholder	输入框占位文本
options	select类型时的数据（value：选项的值、label：选项的标签）

pageparams 分页配置

pageparams: {
    limit: 10,//每页显示的条数(默认每页显示10条)//非必填
    //pageSizes:[10,20,30,40,50,200],//非必填
    // layout:'total, sizes, prev, pager, next, jumper',//非必填
},

属性名	说明	必填
limit	每页显示的条数(默认每页显示10条)	非必填
pageSizes	每页显示个数选择器的选项设置（同官方组件）	非必填
layout	组件布局，子组件名用逗号分隔（同官方组件）	非必填

rowHandle crud按钮配置

rowHandle:{
    width: 180,//操作列宽度
    fixed:"right",//固定操作列在右侧
    permission:{//增删改查按钮权限控制（是否显示）
        add:this.hasPermission(this.$options.name,'Create'),//bool型 this.$options.name获取当前组件的name本例为userManageCrud
        del:this.hasPermission(this.$options.name,'Delete'),
        edit:this.hasPermission(this.$options.name,'Update'),
        search:this.hasPermission(this.$options.name,'Search'),
        detail:this.hasPermission(this.$options.name,'Retrieve'),
    }
},

属性名	说明
width	table表格操作列宽度
fixed	固定操作列（同官方table组件属性）
permission	增删改查按钮权限控制（是否显示）

permission 增删改查按钮权限控制（是否显示）

属性名	说明
add	新增按钮（值类型bool）
del	删除按钮（值类型bool）
edit	编辑按钮（值类型bool）
search	搜索按钮（值类型bool）
detail	详情按钮（值类型bool）

formOptions crud弹窗dialog属性

formOptions: {
    width:'45%',//dialog弹窗宽度：类型：百分比或字符串
    gutter: 20, // Layout布局栅格间隔
},

属性名	说明
width	dialog弹窗宽度：类型：百分比或字符串
gutter	Layout布局栅格间隔（同官方layout布局属性）

tableOptions crud表格属性

tableOptions:{
    border:true,
    showHeader:true,
},

属性名	说明
border	是否带有纵向边框
showHeader	是否显示表头

tableColumns table表头列

tableColumns:[
     // {label:'用户头像',type:'image',prop:'avatar',minWidth:'60',sortable: false,hidden:false,render:(row)=>{
     //     let elImage = resolveComponent('el-image')//全局组件需要先resolveComponent解析该组件再render渲染，不然该标签会出现原样输出
     //     return h(elImage,{
     //          src:row.avatar ? row.avatar : this.defaultImg,
     //          previewSrcList:[row.avatar ? row.avatar : this.defaultImg],//开启预览，原preview-src-list属性在h渲染方法中，-后字母大写代替即可：previewSrcList
     //          previewTeleported:true,//插入至body元素上
     //          style:"width: 30px;height: 30px",
     //     },)
     //  }
     // },
    {label:'ID',prop:'id',type:'input',minWidth:'100',sortable: false,hidden:true,
        form:{
             //表单属性
             span:24,
             hidden:true,//编辑时隐藏，添加时去除
         }
    },
    {label:'用户头像',type:'image-avatar',prop:'avatar',minWidth:'60',sortable: false,hidden:false,
        render:(row)=>{
            //jsx语法
            return <el-image src={row.avatar ? row.avatar : this.defaultImg} style="width: 30px;height: 30px" preview-teleported={true} preview-srcList={[row.avatar ? row.avatar : this.defaultImg]}></el-image>
        },
        form:{
            //表单属性
            span:24,
            // width:80,头像大小默认80px
        }

     },
     {label:'用户名',prop:'username',type:'input',minWidth:'110',sortable: false,hidden:false,
        form:{
            //表单属性
            span:12,
            rules: [{ required: true, message: '用户名必填项' }],
            placeholder: '请输入用户名',
        }
     },
     {label:'用户昵称',prop:'nickname',type:'input',minWidth:'110',sortable: false,hidden:false,
        form:{
            //表单属性
            span:12,
            placeholder: '请输入用户昵称',
        }
     },
    {label:'密码',prop:'password',type:'input',minWidth:'110',sortable: false,hidden:true,
        form:{
            //表单属性
            span:12,
            rules: [{ required: true, message: '密码必填项' }],
            placeholder: '请输入密码',
            showPassword:true,
        }
     },
     {label:'手机号',prop:'mobile',type:'input',minWidth:'100',sortable: false,hidden:false,
        form:{
            //表单属性
            span:12,
            rules: [{ required: true, message: '手机号必填项' }],
            placeholder: '请输入手机号',
            editDisabled:false,//编辑时是否禁用
        }
     },
     {label:'状态',prop:'is_active',type:'radio',minWidth:'100',sortable: false,hidden:false,
         render: (row) =>{
            let elTag = resolveComponent('el-tag')//全局组件需要先resolveComponent解析该组件再render渲染，不然该标签会出现原样输出
            if(!row.is_active){
                return h(elTag, {
                  type:'warning'
                },()=>'禁用');//用()=>函数方式返回文本值，避免出现console警告：默认槽位遇到非函数值
            }else {
                return h(elTag, {
                  type:'success'
                },()=>'正常');
            }
          },
         form:{
             //表单属性
             span:24,
             options:templateData.STATUS_BOOL,//radio选项属性值
             defaultValue:true,//新增时的默认值
             // valueChange(e){//值变化回调事件
             //     console.log(e,'---变化的值')
             // },
         }
     },
     {label:'创建时间',prop:'create_datetime',minWidth:'150',sortable: false,hidden:false},
],

属性名	说明
label	显示的标题
prop	字段名
type	form中item类型：input/textarea/number/price/switch/select/image-avatar图片上传/radio/date/datetime/
minWidth	table的最小宽度
sortable	table当前列是否排序（bool）
hidden	table当前列是否隐藏（bool）
render	table当前列值得显示自定义
form	form表单属性

说明：其中type为lycrud目前支持的组件，如若发现没有需要的组件可以在gitee提交issue

form 表单

属性名	说明
span	layout布局栅格占据的列数
rules	校验规则（同官方form校验）
hidden	编辑时隐藏，添加时去除（bool）
placeholder	占位提示
editDisabled	编辑时是否禁用（bool型、默认false）
options	radio/select类型的数据（同官方组件option属性）
defaultValue	radio/select类型的新增时的默认值
valueChange(e)方法	值变化回调事件e为变化的值}

crudConfig 属性(选项式) ​

crudRequest 增删改查网络请求 ​

searchBar 搜索栏目配置 ​

searchColums 配置搜索内容 ​

pageparams 分页配置 ​

rowHandle crud按钮配置 ​

permission 增删改查按钮权限控制（是否显示） ​

formOptions crud弹窗dialog属性 ​

tableOptions crud表格属性 ​

tableColumns table表头列 ​

form 表单 ​

crudConfig 属性(选项式)

crudRequest 增删改查网络请求

searchBar 搜索栏目配置

searchColums 配置搜索内容

pageparams 分页配置

rowHandle crud按钮配置

permission 增删改查按钮权限控制（是否显示）

formOptions crud弹窗dialog属性

tableOptions crud表格属性

tableColumns table表头列

form 表单