vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼
更新時間：2024年03月27日 10:54:55 作者：流情
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡單,引入對應(yīng)的js和css文件即可,需要的朋友可以參考下
遇到原生的html小型單頁應(yīng)用時，是脫離了vue框架，而我們又想使用vue的語法和element的組件加快我們的開發(fā)速度，這個時候就需要引用他們的js了。技術(shù)棧即html+vue.js+element-ui。而使用它們的方法也很簡單，引入對應(yīng)的js和css文件即可。下面用一個小例子展示下。
普普通通的表單頁面：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單頁面</title>
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" >
<!-- 引入組件庫 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
</head>
<style>
#app {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
margin-top: 10vh;
}
html{
width: 100%;
height: 100%;
background: #f0faff;
}
.el-form {
max-width: 600px;
width: 100%;
box-shadow: 1px 1px 8px #dedede;
padding: 30px;
border-radius: 10px;
background: #fff;
}
.el-row {
margin-bottom: 20px;
}
/* .el-button {
width: 100%;
} */
</style>
<body>
<div id="app">
<el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
<el-row>
<h3>業(yè)務(wù)數(shù)據(jù)導(dǎo)入終端：</h3>
</el-row>
<el-row>
<el-form-item label="郵箱" prop="email">
<el-input placeholder="請輸入接收通知的郵箱" v-model="formData.email"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="IP地址" prop="ip">
<el-input v-model="formData.ip"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="端口" prop="port">
<el-input v-model="formData.port"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="賬號" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密碼" prop="password">
<el-input v-model="formData.password" type="password"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="數(shù)據(jù)庫" prop="database">
<el-input v-model="formData.database"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="表名" prop="table">
<el-input v-model="formData.table"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="上傳文件">
<el-upload
class="upload-demo"
ref="upload"
:action="uploadUrl"
:before-upload="beforeUpload"
accept=".xlsx,.xls"
:limit="1"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">選取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上傳excel文件</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="text-align: center; margin-top: 20px;">
<el-button type="primary" @click="submitForm" :disabled="disabled">{{buttonText }}</el-button>
<el-button type="danger" @click="clear">清除緩存</el-button>
</el-col>
</el-row>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
timer:0,
limitTime: 1 * 60, // 限制時間為10分鐘
disabled:false,
formRules:{
email:[
{ required: true, message: '請輸入聯(lián)系郵箱', trigger: 'blur' }
],
ip: [
{ required: true, message: '請輸入ip', trigger: 'blur' }
],
port: [
{ required: true, message: '請輸入端口', trigger: 'blur' }
],
username: [
{ required: true, message: '請輸入賬號', trigger: 'blur' }
],
password: [
{ required: true, message: '請輸入密碼', trigger: 'blur' }
],
database: [
{ required: true, message: '請輸入數(shù)據(jù)庫', trigger: 'blur' }
],
table: [
{ required: true, message: '請輸入表名', trigger: 'blur' }
],
},
formData: {
email:'',
ip: '',
port: '',
username: '',
password: '',
database: '',
table: '',
},
uploadUrl: '/upload' // 文件上傳的接口地址
};
},
mounted(){
var obj = localStorage.getItem("formData")||"";
var timer = localStorage.getItem("disabled")||"";
if(timer){ //定時還沒結(jié)束，重置
this.disabled = true;
this.timer = this.limitTime;
const countdown = setInterval(() => {
this.timer--;
if (this.timer <= 0) {
localStorage.removeItem("disabled");
clearInterval(countdown);
this.disabled = false;
}
}, 1000);
}
if(obj){
this.formData = JSON.parse(obj);
}
},
computed: {
buttonText() {
if (this.disabled) {
const minutes = Math.floor(this.timer / 60);
const seconds = this.timer % 60;
return `禁用中 (${minutes}:${String(seconds).padStart(2, '0')})`;
} else {
return '提交';
}
},
},
methods: {
beforeUpload(file) {
// 上傳文件之前的鉤子函數(shù)，可用于校驗(yàn)文件類型等
const isExcel = ((file.type === 'application/vnd.ms-excel')||(file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'));
return isExcel;
},
clear(){
this.$confirm('該操作會清除本地保存的數(shù)據(jù)信息, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
localStorage.clear();
this.$message({
type: 'success',
message: '清除成功'
});
setTimeout(()=>{window.location.reload();},1000)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 提交表單的函數(shù)，將表單數(shù)據(jù)和文件一起發(fā)送給后端
const formData = new FormData();
formData.append('email', this.formData.email);
formData.append('ip', this.formData.ip);
formData.append('port', this.formData.port);
formData.append('access', this.formData.username);
formData.append('password', this.formData.password);
formData.append('dataName', this.formData.database);
formData.append('tableName', this.formData.table);
console.log(this.$refs.upload.uploadFiles[0]);
if(this.$refs.upload.uploadFiles[0]&&this.beforeUpload(this.$refs.upload.uploadFiles[0].raw)){
const file = this.$refs.upload.uploadFiles[0].raw;
formData.append('file', file);
}else{
this.$message.error('請上傳excel文件');
return;
}
localStorage.setItem("formData",JSON.stringify(this.formData));
this.disabled = true;
localStorage.setItem("disabled",this.disabled)
this.timer = this.limitTime;
const countdown = setInterval(() => {
this.timer--;
if (this.timer <= 0) {
localStorage.removeItem("disabled");
clearInterval(countdown);
this.disabled = false;
}
}, 1000);
// 發(fā)送表單數(shù)據(jù)和文件給后端
fetch('http://localhost/from/uploadExcel', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('提交成功', data);
if(data.code==200){
this.$message({
message: data.msg,
type: 'success'
});
}else{
this.$message({
message: data.msg,
type: 'warning'
});
}
// 處理后端返回的數(shù)據(jù)
})
.catch(error => {
console.error('提交失敗', error);
// 處理提交失敗的情況
});
} else {
this.$message.error('請將表單補(bǔ)充完整');
}
});
}
}
});
</script>
</body>
</html>到此這篇關(guān)于vue.js+element-ui的基礎(chǔ)表單的文章就介紹到這了,更多相關(guān)vue.js element-ui表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單
- vue.js+element-ui動態(tài)配置菜單的實(shí)例
- vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
- vue.js element-ui tree樹形控件改iview的方法
- 使用Vue.js和Element-UI做一個簡單登錄頁面的實(shí)例
- vue.js element-ui validate中代碼不執(zhí)行問題解決方法
- 使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問題
- Vue element-ui父組件控制子組件的表單校驗(yàn)操作
- 詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
相關(guān)文章
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
一篇文章教你實(shí)現(xiàn)VUE多個DIV,button綁定回車事件
這篇文章主要介紹了VUE多個DIV綁定回車事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問題,需要的朋友可以參考下2018-04-04
通過簡單的三步讓大家對VUEX快速的入門，本文還介紹了VUEX的最基礎(chǔ)的函數(shù)以及相關(guān)知識點(diǎn)，有興趣的學(xué)習(xí)下。2018-05-05
vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用詳解
這篇文章主要介紹了vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了vue中實(shí)現(xiàn)高德定位功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
基于Vue實(shí)現(xiàn)本地消息隊列MQ的示例詳解
這篇文章為大家詳細(xì)主要介紹了如何基于Vue實(shí)現(xiàn)本地消息隊列MQ, 讓消息延遲消費(fèi)或者做緩存,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-02-02
這篇文章主要介紹了Vue?mergeProps用法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
vue項(xiàng)目前端加前綴(包括頁面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項(xiàng)目前端加前綴(包括頁面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue組件封裝實(shí)現(xiàn)抽獎隨機(jī)數(shù)
這篇文章主要為大家詳細(xì)介紹了vue組件封裝實(shí)現(xiàn)抽獎隨機(jī)數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03