Django-Vue-Lyadmin说明 #
实际crud中可能会给form中的选择组件传入网络请求后的动态数据，正常在data的return内的变量赋值的时候是无法传入的，结果直接为undefined
错误写法：
data(){
return{
roomList:this.getJizhangRoomlist(),//网络请求数据
options：this.roomList
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
正确的做法是在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191