个人技术总结 (vex-table)
- 技术概述
- 技术详述
- 技术使用中遇到的问题和解决过程。
- 总结
- 参考文献
Vxe-table是一个Vue的表格插件，我们项目需要实现填写表格的功能，于是我就找到了这个插件。难点在于，我觉得这个插件的手册写得不是很好，而且比较冷门，网上缺少关于它的教程和讨论，很多地方要自己研究。
Vxe-table由三个部分组成，表格样式，表格数据，表格方法。以此次作业的项目中一个页面的表格为例。
效果图
表格样式
表格样式由参数来控制，表格要调用的方法也是写在参数上的。
代码
<vxe-table
v-if="classList"
border
resizable
row-key
highlight-hover-row
keep-source
max-height="600px"
ref="xTable"
:data="list">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column field="userId" title="学号" cell-type="string">
<template v-slot="{ row }">
<router-link :to="{path:'/admin/user/details', query:{userId: row.userId, classId: row.classId}}">
{{row.userId}}
</router-link>
</template>
</vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="classId" title="班级" :formatter="formatterClass"></vxe-table-column>
<vxe-table-column field="groupId" title="小组">
<template v-slot="{ row }">
<router-link :to="{path:'/admin/team/details', query:{groupId: row.groupId, classId: row.classId}}">
{{toGroupName(row.groupId)}}
</router-link>
</template>
</vxe-table-column>
<vxe-table-column field="password" title="密码"></vxe-table-column>
<vxe-table-column field="telephone" title="电话号码" cell-type="string"></vxe-table-column>
<vxe-table-column field="status" title="职务" :formatter="formatterStatus"></vxe-table-column>
<vxe-table-column title="操作" width="150px">
<template v-slot="{ row }">
<vxe-button type="button" @click="editEvent(row)" data-toggle="modal" data-target="#UpdateModal" >修改</vxe-button>
<vxe-button type="button" @click="removeEvent(row)" status="danger">删除</vxe-button>
</template>
</vxe-table-column>
</vxe-table>
表格数据
使用axios来访问服务器接口获取数据并保存
getResponse() {
var self = this;
axios.get(api.adminUserList, null)
.then(function(res) {
if (res.status == 200 && res.data.status == 1) {
self.tableData = res.data.data;
self.data = res.data.data;
} else {
console.log(res.data.msg);
}
}).catch(function(error) {
console.log(error);
})
},
表格方法
//表格检验规则，required表示必填，message为错误时的提示信息，validator：值检验
validRules: {
'3': [
{required:true, message:'此项必填'},
{validator: maxValid}
]
}
//如果超过最大值就返回错误
const maxValid = ({ cellValue }) => {
return new Promise((resolve, reject) => {
if (cellValue > 0) {
reject()
} else {
resolve()
}
})
}
//编辑关闭事件，关闭时进行自动累计
editClosedEvent ({ row, column }) {
for(var i=0; i<this.response.content.tableData.length; i++) {
this.response.content.tableData[i][0] = this.tableData[i][0];
this.response.content.tableData[i][1] = this.tableData[i][1];
this.response.content.tableData[i][2] = this.tableData[i][2];
var sum = 0,
j = 3;
for(var j=3; j<this.response.content.tableColumn.length-2; j++) {
sum += Number(this.tableData[i][j]);
this.response.content.tableData[i][j] = this.tableData[i][j];
}
this.response.content.tableData[i][j] = sum;
this.tableData[i][j] = sum;
j++;
this.response.content.tableData[i][j] = this.tableData[i][j];
}
console.log(this.tableData);
}
//提交事件，
sumbit() {
// 提交表格
// 将修改的数据保存到表单，然后进行提交
console.log(this.tableData);
for(var i=0; i<this.response.content.tableData.length; i++) {
this.response.content.tableData[i][0] = this.tableData[i][0];
this.response.content.tableData[i][1] = this.tableData[i][1];
this.response.content.tableData[i][2] = this.tableData[i][2];
var sum = 0,
j = 3;
for(var j=3; j<this.response.content.tableColumn.length-2; j++) {
sum += Number(this.tableData[i][j]);
this.response.content.tableData[i][j] = this.tableData[i][j];
}
this.response.content.tableData[i][j] = sum;
j++;
this.response.content.tableData[i][j] = this.tableData[i][j];
}
//判断表单完整性
var self = this;
this.fullValidEvent().then(function(res) {
if(!res) {
return;
} else {
//发送
var time = new Date();
var submitForm = {};
submitForm['evaluationOuterId'] = self.$data.response.evaluationOuterId;
submitForm['groupId'] = self.$data.request.groupId;
submitForm['submitTime'] = parseInt(time.getTime()/1000);
submitForm['content'] = self.$data.response.content;
for(var i=0; i<submitForm.content.tableData.length; i++) {
if(submitForm.content.tableData[i][0] == self.request.groupId) {
submitForm.content.tableData.splice(i,1);
break;
}
}
//提交
axios.post(api.userEvaluationOuterSubmit,submitForm)
.then(function(res) {
if(res.status == 200 && res.data.status == 1) {
alert(res.data.msg);
self.$router.push('/home');
} else {
alert(res.data.msg);
}
}).catch(function(error) {
console.log(error);
})
}
})
}
问题：有时候类似性别或者班级这种信息会用数字来保存，比如1对应男0对应女。这时候表格里就会出现性别和班级这一列会是一些数字，让人摸不着头脑。
解决：用vxe-table-columm的:formatter这个属性来解决
<vxe-table-column field="classId" title="班级" :formatter="formatterClass"></vxe-table-column>
data () {
return {
classOption: [],
}
}
methods: {
getClassOption(data) {
for (let value of data) {
var option = {
className: value.className,
classId: value.classId,
groupNum: value.groupNum,
}
this.classOption.push(option);
}
},
formatterClass({cellValue}) {
let item = this.classOption.find(item => item.classId == cellValue)
return item ? item.className : ''
},
}
上述代码实现了将数字形式的classId转化成汉字的className在表格中显示。
Vxe-table总体还是一个很强大的表格插件，主要是解决了我们实现动态可编辑表格的需求。但是文档写的不是很清楚，而且这是一个相对冷门的技术，网上有关它的教程与讨论少之又少，开发中遇到问题有时候在网上根本找不到解决方法，造成了一些麻烦。
