ElementUI 后端-elementui的坑
在使用ElementUI的过程中，可能会遇到一些与后端交互时的困扰。解决方案是：深入了解ElementUI组件的属性和事件机制，并且正确处理前后端的数据交互格式。
一、表单验证数据传递问题
在使用ElementUI的表单组件时，如果将表单数据直接通过axios等工具发送给后端，可能会出现数据格式不符合后端要求的情况。
例如有一个登录表单：
html
<el-form :model="loginForm" ref="loginFormRef" :rules="rules">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-button @click="submitForm">登录</el-button>
</el-form>
javascript
data(){
return{
loginForm:{
username:'',
password:''
},
rules:{
username:[
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods:{
submitForm(){
this.$refs.loginFormRef.validate((valid) =>{
if(valid){
axios.post('/login',{
// 这里如果不做特殊处理，可能后端接收不到正确的数据格式
...this.loginForm
}).then(response => {
console.log(response);
})
}
})
}
}
一种解决思路是，在发送之前对数据进行处理。比如后端要求数据以特定的对象结构传递，可以在发送前重新构建对象：
javascript
submitForm(){
this.$refs.loginFormRef.validate((valid) =>{
if(valid){
let data = {
user_info:{
username:this.loginForm.username,
password:this.loginForm.password
}
};
axios.post('/login',data).then(response => {
console.log(response);
})
}
})
}
或者使用qs库来序列化数据（对于某些特殊的后端接口要求）：
javascript
import qs from 'qs';
submitForm(){
this.$refs.loginFormRef.validate((valid) =>{
if(valid){
axios.post('/login',qs.stringify(this.loginForm)).then(response => {
console.log(response);
})
}
})
}
二、表格分页与后端交互
当使用ElementUI的表格组件并且要实现分页功能与后端交互时，容易出现数据加载不完整等问题。
html
<el-table :data="tableData" style="width: 100%">
<!-- 表格内容 -->
</el-table>
<el-pagination
@size - change="handleSizeChange"
@current - change="handleCurrentChange"
:current - page="currentPage"
:page - sizes="[10, 20, 30, 40]"
:page - size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
javascript
data(){
return{
tableData:[],
currentPage:1,
pageSize:10,
total:0
}
},
methods:{
handleSizeChange(val){
this.pageSize = val;
this.getTableData();
},
handleCurrentChange(val){
this.currentPage = val;
this.getTableData();
},
getTableData(){
axios.get('/getTableData',{
params:{
page:this.currentPage,
limit:this.pageSize
}
}).then(response=>{
this.tableData = response.data.items;
this.total = response.data.total;
})
}
}
有时候后端返回的数据字段名可能与前端定义的不同，这就需要我们对返回的数据进行映射转换。比如后端返回的数据中表示总条数的是count而不是total，那么可以在获取到数据之后进行转换：
javascript
getTableData(){
axios.get('/getTableData',{
params:{
page:this.currentPage,
limit:this.pageSize
}
}).then(response=>{
this.tableData = response.data.items;
this.total = response.data.count; // 进行转换
})
}
如果后端返回的数据格式是嵌套的，也可以使用计算属性来简化显示逻辑：
javascript
computed:{
computedTableData(){
// 对原始数据进行处理后再用于表格显示
return this.tableData.map(item=>{
// 根据需求对item进行处理
return item;
})
}
}
然后在模板中使用computedTableData作为表格的数据源。
