说明

实际crud中可能会给form中的选择组件传入网络请求后的动态数据，正常在data的return内的变量赋值的时候是无法传入的，结果直接为undefined

错误写法：

data(){
    return{
        roomList:this.getJizhangRoomlist(),//网络请求数据
        options：this.roomList
    }
}

正确的做法是在data的return外（Vue 实例外声明的属性）直接定义变量传入，方法如下：（roomList为网络请求动态数据）

实例代码

<script lang="jsx">
    import {UsersUsers,UsersUsersAdd,UsersUsersDelete,UsersUsersEdit,UsersUsersdisableEdit,UsersRoomlist} from '@/api/api'
    import LyCrud from "@/components/lycrud";
    import templateData from "@/components/dict/crudTemplateData"
    import { h,resolveComponent } from 'vue';
    export default {
        name: "userManageCrud",
        components: {LyCrud},
        data(){
            let roomList = this.getJizhangRoomlist()//使data中变量能调用
            return{
                defaultImg:require('../../assets/img/avatar.jpg'),
                //crud配置
                crudConfig:{
                    //crud请求方法配置
                    crudRequest:{
                        add:UsersUsersAdd,
                        del:UsersUsersDelete,
                        edit:UsersUsersEdit,
                        search:UsersUsers,
                    },
                    //搜索栏目配置
                    searchBar:{
                        showSearchBar:true,//显示搜索栏目
                        searchColums:[
                            {label:'账号',type:'input',prop:'username',width:150,maxlength:60,placeholder:'请输入账号'},
                            {label:'业务员姓名',type:'input',prop:'name',width:150,maxlength:60,placeholder:'请输入业务员姓名'},
                            {label:'所属门店',type:'select',prop:'salesroom',width:130,placeholder:'请选择',
                                options:roomList
                            },
                            {label:'账号状态',type:'select',prop:'is_active',width:100,placeholder:'请选择',
                                options:[
                                    {value:1,label:'正常'},
                                    {value:0,label:'禁用'}
                                ]
                            },
                        ]
                    },
                    //显示分页
                    showPagination:true,
                    //分页配置
                    pageparams: {
                        limit: 10,//每页显示的条数(默认每页显示10条)//非必填
                        //pageSizes:[10,20,30,40,50,200],//非必填
                        // layout:'total, sizes, prev, pager, next, jumper',//非必填
                    },
                    //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'),
                        }
                    },
                    //crud弹窗属性
                    formOptions: {
                        width:'45%',//dialog弹窗宽度：类型：百分比或字符串
                        gutter: 20, // Layout布局栅格间隔
                    },
                    //crud表格属性
                    tableOptions:{
                        border:true,
                        showHeader:true,
                    },
                    showSelectable:true,//表格显示复选项框
                    //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:'账号',prop:'username',type:'input',minWidth:'110',sortable: false,hidden:false,
                            form:{
                                //表单属性
                                span:24,
                                rules: [{ required: true, message: '账号必填项' }],
                                placeholder: '请输入账号',
                                editDisabled:false,//编辑时是否禁用
                            }
                        },
                        {label:'密码',prop:'password',type:'input',minWidth:'110',sortable: false,hidden:true,
                            form:{
                                //表单属性
                                span:24,
                                rules: [{ required: true, message: '密码必填项' }],
                                placeholder: '请输入密码',
                                showPassword:true,
                            }
                        },
                        {label:'业务员姓名',prop:'name',type:'input',minWidth:'110',sortable: false,hidden:false,
                            form:{
                                //表单属性
                                span:24,
                                placeholder: '请输入业务员姓名',
                            }
                        },
                        {label:'所属门店',prop:'salesroom',type:'select',minWidth:'180',sortable: false,hidden:false,
                            render:(row)=>{
                                //table显示样子
                                let namerow =  roomList.filter(item=>{
                                    return item.value === row.salesroom
                                })
                                return namerow.length>0?namerow[0].label:'-'
                            },
                            form:{
                                //表单属性
                                span:24,
                                options:roomList,
                            },
                        },
                        {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},
                    ],
                },
            }
        },
        methods:{
            setFull(){
                this.$refs.lycrud.setFull()
            },
            //自定义操作列按钮方法
            handleClick(row,flag){
                let vm = this
                if(flag=='disable'){
                    UsersUsersdisableEdit({id:row.id}).then(res=>{
                        if(res.code == 2000) {
                            vm.$message.success(res.msg)
                            vm.$refs.lycrud.handleRefresh()//刷新表格数据
                        } else {
                            vm.$message.warning(res.msg)
                        }
                    })
                }
            },
            getJizhangRoomlist(){
                let slist = []
                UsersRoomlist({page:1,limit:999}).then(res=>{
                    if(res.code == 2000) {
                        res.data.data.forEach(item=>{
                            slist.push({
                                value:item.id,
                                label:item.name
                            })
                        })
                    }
                })
                return slist
            },
        },
    }
</script>