kailong321200875 / vue-element-plus-admin Goto Github PK
View Code? Open in Web Editor NEWA backend management system based on vue3, typescript, element-plus, and vite
Home Page: https://element-plus-admin.cn/
License: MIT License
A backend management system based on vue3, typescript, element-plus, and vite
Home Page: https://element-plus-admin.cn/
License: MIT License
Hello @kailong321200875
I tried to use api option in Select component to fetch options from backend directly.
But there is no request.
I used formSchema and useForm hook.
What's wrong?
RT
Hello @kailong321200875
I'd like to use any component without any label like following.
Hello @kailong321200875
I'd like to show placeholder in input in search and pass string on schema.
But I can't find any props in form schema.
How can I fix?
作者您好,首先非常感谢你的这一套项目,对于我们帮助很大
如今我遇到这样一个问题,就是Dialog组件和Form配合使用时会报错
The form is not registered. Please use the register method to register
按照你给的例子分开,将Form当成一个组件不会报错,但实际在开发中往往有时写在一起会更方便一些,不知道这个问题是设计如此还是存在的问题呢
Hello @kailong321200875
Thank you for your kind response.
Those are the most helpful for me.
Thank you again.
And I got another issue and here is.
It's just code formatting problem.
I enjoy using prettier for code formatting and it's working well in other projects and also checked now.
but it's not working in this template.
I can't find that in formatter list, like following.
How can I fix this?
Why is this error occurred?
It's just code format error(eslint related) and possible to affect project running?
What formatter extension should I use fix this formatting error automatically in vscode?
如题。
I want to pass value to different components not only the textbox. For e.g: CheckBox or ComboBox...
I checked the example and it's fixed values
谢谢
你们好,不知道为什么el-table-column 里面添加的按钮并不展示在页面上,单独添加的按钮是可以展示的,不知道是为什么。
页面展示如图:
代码:
<el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260"> <template #action="{ row }"> <el-button>Default</el-button> <el-button type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button> <el-button type="text" icon="el-icon-circle-check" @click="handleDataScope(row)" >数据权限</el-button > <el-button v-if="row.roleId > 2" type="text" icon="el-icon-delete" @click="handleDelete(row)" >删除</el-button > </template> </el-table-column>
怎么在本地代理配置,vite.config.ts
以下代码一直在404错误:
server: { proxy: { // 选项写法 '/api': { target: 'http://47.***.***.***', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } }, hmr: { overlay: false }, host: '0.0.0.0' },
如题 谢谢大佬
Hello @kailong321200875
Actually I used to use React.js and Vue.js is first for me.
And I'd like to declare variable like Ref and v-model in Schema to handle in script setup.
For example there are two components type and list like following
The list in the right should be changed along the type.
But I have no solution to do this now.
Only thing I can do is to get value using getFormData() from whole schema when radio is changed and then execute setSchemaOption().
I think this is not the best solution.
How can I fix?
Hello @kailong321200875
I hope you had a good weekend.
And I'd like to change the height of dialog because it has only fixed height without necessary. Like this.
Hello @kailong321200875
I forked example dialog page and should set some string to a input component.
I can get form data using getFormData() but setValue() is not a defined function here.
I logged write but it doesn't have a methods.
What's wrong?
I think this is typing bug in https://element-plus-admin-doc.cn/components/form.html#useform.
Hello @kailong321200875
I'd like to use Crud schema for Input component with a label right and custom size. Like in this image.
I just tried like this one.
{
field: 'hasChild',
label: '生育情況',
form: {
component: 'Select',
colProps: {
span: 4
},
show: true
},
table: {
show: false
}
},
{
field: 'boyNum',
label: '',
form: {
component: 'Input',
colProps: {
span: 2
},
show: true
},
table: {
show: false
}
},
{
field: 'girlNum',
label: '',
form: {
component: 'Input',
colProps: {
span: 2
},
show: true
},
table: {
show: false
}
},
I should fix this but how can?
请教作者
比如 用户列表密码项, 页面不用显示,但是编辑里面可以出现。
另外某个列数据如果使用自定义组件,有没有案例可供参考
谢谢
Hello @kailong321200875
Thank you for your kind responses.
I tried to deploy my project on vercel and it's done.
But the api is not working.
vite.config.ts
When I try to make a request in deployed website, 404 error is occured.
How can I fix?
Hello @kailong321200875
I'd like to go to /login
when the session is expired in the backend side.
But below code works sometimes but not other times.
In case of not working, router.replace() only changes the value of url in browser link bar, not execute.
How can I fix?
// response 拦截器
service.interceptors.response.use(
(response: AxiosResponse<Recordable>) => {
console.log(response.data)
if (response.data.code === result_code) {
return response
} else if (response.data.code === 401 && response.data.msg === '登陆过期!') {
wsCache.clear()
tagsViewStore.delAllViews()
resetRouter() // 重置静态路由表
router.replace({
path: '/login'
})
} else {
ElMessage.error(response.data.msg)
}
},
(error: AxiosError) => {
console.log('err' + error) // for debug
ElMessage.error(error.message)
return Promise.reject(error)
}
)
Hello @kailong321200875
CRUD Schema you created is very smart and intelligent so it's very convenient to use.
And I'd like to know how to change the orders in search bar.
For example the order in table is A, B, C, D and the order in search form is B, A, D, C.
Is this possible in CRUD Schema?
Hi,
How can I use this for a project I'm working on? What are the steps required to use this as a plain template for my use case? I there any specific file I need to remove?
F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite-plugin-html\dist\index.cjs:125
const proxy = viteConfig.server?.proxy ?? {};
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\vite.config.ts:46:31)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.require.extensions. [as .ts] (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71416:20)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at loadConfigFromBundledFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71424:17)
at loadConfigFromFile (F:\学灯网录制的视频教程\前端脚手架20220407\vue-element-plus-admin-master\node_modules.pnpm\[email protected][email protected]\node_modules\vite\dist\node\chunks\dep-9c153816.js:71343:32)
Waiting for the debugger to disconnect...
ELIFECYCLE Command failed with exit code 1.
希望加一个新建菜单的页面,规定下icon与title
Hell @kailong321200875
I used componentProps: { style: { width: '100%' } } to set width fit in datepicker component but not working well.
低版本谷歌(78.x.xxx.xxx)?或者??可选链写法不支持报错,需要升级到最新版本
Hello @kailong321200875
I have an issue in using an AutoComplete component.
I need to show dropdown with HEADER like this one.
But I can't handle the header like above.
How can I fix?
Hello @kailong321200875
I use span to set grid in select component in crud schema but is not working.
{
field: 'isMarried',
label: '婚姻狀況',
form: {
component: 'Select',
colProps: {
span: 8
},
show: true
},
table: {
show: false
}
},
Actually it's working well in Input but not others including DatePicker.
How can I fix?
Hello @kailong321200875
I used this statement to fix select component width but not working yet. No changes.
Hello @kailong321200875
This is amazing open source template with Vite and Elementplus.
Thank you for your effort.
And I have an issue.
I always get undefined response when I make a request in api.
// api/login/index.ts
export const loginApi = async (data: UserLoginType): Promise<IResponse> => {
const res = await request.post({
url: '/index/login/system',
headersType: 'application/x-www-form-urlencoded',
data
})
console.log('in api: ', res)
// this returns undefined. but there's correct response when I checked in console.
return res && res.data
}
// vite.config.ts
...
server: {
port: 4000,
proxy: {
// 选项写法
'/api': {
target: 'http://35.194.244.237:9998',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
},
hmr: {
overlay: false
},
host: '0.0.0.0'
},
...
I also tried with sample api link for test.
https://jsonplaceholder.typicode.com/todos/1
But the result is the same.
How can I fix this?
您好,demo下载到本地电脑运行时,登录和其他接口的代理域名代码是在哪里?
vite.config.ts里的proxy代码是注释的,所以目前找不到默认接口的代理是在哪?
Hello @kailong321200875
Can I use ref in component in CRUD schema?
Like this one.
const my = ref(false)
// Schema
{
field: 'my',
label: '',
form: { show: false },
table: { show: false },
search: {
show: true,
component: 'Hidden',
colProps: { span: 0 },
value: my
}
},
const myOrder = () => {
my.value = !my.value
}
But the value is not changing along to myOrder() function.
How can I fix?
Hello @kailong321200875
I'd like to use a default label and another label in form.
I tried like following but not working.
Can I fix this?
我根据您的模板做了一套, vuecli 并且没有使用 ts 开发的模板,不知道是否有机会, 可以给您看一下?
Hello @kailong321200875
I have search bar with input and select components.
No problems in input but not in select.
Now I'm updating my previous version using this template and it's load options from backend originally.
I'd like to establish this function by editing search schema.
Just want to set componentProps using link of api from backend.
Like this one.
componentsProps: '/sys/dict/option-list'
Is this possible?
作者您好,我有两个路由问题,向您请教
// 文件地址: utils/routerHelper.ts
const promoteRouteLevel = (route: AppRouteRecordRaw) => {
let router: Router | null = createRouter({
routes: [route as unknown as RouteRecordNormalized],
history: createWebHashHistory()
})
.....
}
2. 用 createRouter 生成的路由有个问题,
二级及更深的路由的 path 属性的设置, 不能 '/menu1', 只能 'menu1'
如果是 '/menu1' 这样的路径, 生成的路由就不是全路径了,页面就读取不到这个路由了
这是忘记对这块进行处理了吗?
感谢您看我的问题~
Hello @kailong321200875
I'm just developing frontend side using this template and have 401 error code in response when the session is expired in backend side.
The backend is not editable so I handle response and logout manually.
I think the code will be here.
// config/axios/index.ts
// response 拦截器
service.interceptors.response.use(
(response: AxiosResponse<Recordable>) => {
if (response.data.code === result_code) {
return response
} else {
ElMessage.error(response.data.msg)
// handle here. Expected code will be here I think.....
if (response.data.code === 401 && response.data.msg === '登陆过期!') {
wsCache.clear()
tagsViewStore.delAllViews()
resetRouter() // 重置静态路由表
router.replace('/login')
}
}
},
(error: AxiosError) => {
console.log('err' + error) // for debug
ElMessage.error(error.message)
return Promise.reject(error)
}
)
But it's not working.
How can I fix this?
Sorry for asking basic question.
Axios如何配Authorization? config.headers['Authorization'] = token 会出错
const adminList = [ { path: '/level', component: '#', redirect: '/level/menu1', name: 'Level', meta: { title: 'router.level', icon: 'carbon:skill-level-advanced' }, children: [ { path: 'menu1', name: 'Menu1', component: 'views/Level/Menu2', meta: { title: 'router.menu1' } }, { path: 'menu2', name: 'Menu2Demo', component: 'views/Level/Menu2', meta: { title: 'router.menu2' } } ] }, { path: '/level3', component: '#', redirect: '/level/menu1/menu1-1/menu1-1-1', name: 'Level3', meta: { title: 'router.level', icon: 'carbon:skill-level-advanced' }, children: [ { path: 'menu1', name: 'Menu13', component: 'views/Level/Menu2', meta: { title: 'router.menu1' } }, { path: 'menu2', name: 'Menu23Demo', component: 'views/Level/Menu2', meta: { title: 'router.menu2' } } ] } ]
keep-alive好像没效啊= =我每次切换都能执行onMounted
Hello @kailong321200875
I tried to use useValidator to validate it's mobile number or not.
Like here.
But I'm not sure how I can use this func, especially parameters.
How can I fix?
如题
点击标签页最右侧按钮,菜单正常
Hello @kailong321200875
How can I update my current version?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.