个人技术总结——Vxe-table

1、技术概述

Vxe-table是一个Vue的表格插件，我们项目需要实现填写表格的功能，于是我就找到了这个插件。难点在于，我觉得这个插件的手册写得不是很好，很多地方要自己研究。

2、技术详述

简单来说，Vxe-table由三个部分组成，表格样式，表格数据，表格方法。

表格样式

表格样式由参数来控制，表格要调用的方法也是写在参数上的。

	
{{this.$data.title}}
	
	 :data="tableData"
	 :edit-config="{trigger: 'click', mode: 'cell'}"
	 :edit-rules="validRules"
	 @edit-disabled="editDisabledEvent"
	 @edit-closed="editClosedEvent">
	
	

	
		
			

				提交
			
		
	

表格方法

//表格检验规则，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

表格数据，使用axios来访问服务器接口获取数据并保存

getResponse() {
	var self = this;
	axios.post(api.userEvaluationOuter, self.request)
	.then(function(res) {
		if(res.status == 200 && res.data.status == 1) {
			self.response = res.data.data;
			self.title = self.response.name;
			//构建表头
			var i;
			for(i=3;i

3、技术使用中遇到的问题和解决过程。

问题：使用axios调用功能为添加数据的接口的时候，表格内的数据没有自动更新，要刷新才能显示。
解决：在App.vue中添加这样的代码

上述代码实现了页内刷新功能，并且在刷新的时候不会丢失数据，然后在需要调用的地方引入，

那么在需要使用的地方就可以用this.reload来刷新了，比如在每次调用新增信息接口之后调用一次reload，这样就能很快看到接口调用的结果。

4、总结

Vxe-table总体还是一个很强大的表格插件，主要是解决了我们实现动态可编辑表格的需求。但是也有一些地方做的不好，比如文档写得不是很清楚，高级表格和普通表格不是同一个组件，参数不一致，参数动态绑定会出问题等，但瑕不掩瑜，如果想要更完美的解决方案大概需要自己开发了。

5、参考文献

Vxe-table官方文档