vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼
更新時(shí)間：2024年03月27日 10:54:55 作者：流情
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實(shí)例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡(jiǎn)單,引入對(duì)應(yīng)的js和css文件即可,需要的朋友可以參考下
遇到原生的html小型單頁(yè)應(yīng)用時(shí)，是脫離了vue框架，而我們又想使用vue的語(yǔ)法和element的組件加快我們的開(kāi)發(fā)速度，這個(gè)時(shí)候就需要引用他們的js了。技術(shù)棧即html+vue.js+element-ui。而使用它們的方法也很簡(jiǎn)單，引入對(duì)應(yīng)的js和css文件即可。下面用一個(gè)小例子展示下。
普普通通的表單頁(yè)面：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單頁(yè)面</title>
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" >
<!-- 引入組件庫(kù) -->
<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="請(qǐng)輸入接收通知的郵箱" 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="賬號(hào)" 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ù)庫(kù)" 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, // 限制時(shí)間為10分鐘
disabled:false,
formRules:{
email:[
{ required: true, message: '請(qǐng)輸入聯(lián)系郵箱', trigger: 'blur' }
],
ip: [
{ required: true, message: '請(qǐng)輸入ip', trigger: 'blur' }
],
port: [
{ required: true, message: '請(qǐng)輸入端口', trigger: 'blur' }
],
username: [
{ required: true, message: '請(qǐng)輸入賬號(hào)', trigger: 'blur' }
],
password: [
{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' }
],
database: [
{ required: true, message: '請(qǐng)輸入數(shù)據(jù)庫(kù)', trigger: 'blur' }
],
table: [
{ required: true, message: '請(qǐng)輸入表名', 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){ //定時(shí)還沒(méi)結(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('該操作會(huì)清除本地保存的數(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('請(qǐng)上傳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('請(qǐng)將表單補(bǔ)充完整');
}
});
}
}
});
</script>
</body>
</html>到此這篇關(guān)于vue.js+element-ui的基礎(chǔ)表單的文章就介紹到這了,更多相關(guān)vue.js element-ui表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單
- vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例
- vue.js與element-ui實(shí)現(xiàn)菜單樹(shù)形結(jié)構(gòu)的解決方法
- vue.js element-ui tree樹(shù)形控件改iview的方法
- 使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
- vue.js element-ui validate中代碼不執(zhí)行問(wèn)題解決方法
- 使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問(wèn)題
- Vue element-ui父組件控制子組件的表單校驗(yàn)操作
- 詳解element-ui 表單校驗(yàn) Rules 配置 常用黑科技
相關(guān)文章
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車事件
這篇文章主要介紹了VUE多個(gè)DIV綁定回車事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問(wèn)題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問(wèn)題,需要的朋友可以參考下2018-04-04
通過(guò)簡(jiǎn)單的三步讓大家對(duì)VUEX快速的入門，本文還介紹了VUEX的最基礎(chǔ)的函數(shù)以及相關(guān)知識(shí)點(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文件并使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了vue中實(shí)現(xiàn)高德定位功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ的示例詳解
這篇文章為大家詳細(xì)主要介紹了如何基于Vue實(shí)現(xiàn)本地消息隊(duì)列MQ, 讓消息延遲消費(fèi)或者做緩存,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-02-02
這篇文章主要介紹了Vue?mergeProps用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
這篇文章主要為大家詳細(xì)介紹了vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03