个人技术总结 (vex-table)

技术概述

Vxe-table是一个Vue的表格插件，我们项目需要实现填写表格的功能，于是我就找到了这个插件。难点在于，我觉得这个插件的手册写得不是很好，而且比较冷门，网上缺少关于它的教程和讨论，很多地方要自己研究。

技术详述

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

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

问题：有时候类似性别或者班级这种信息会用数字来保存，比如1对应男0对应女。这时候表格里就会出现性别和班级这一列会是一些数字，让人摸不着头脑。
解决：用vxe-table-columm的:formatter这个属性来解决

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总体还是一个很强大的表格插件，主要是解决了我们实现动态可编辑表格的需求。但是文档写的不是很清楚，而且这是一个相对冷门的技术，网上有关它的教程与讨论少之又少，开发中遇到问题有时候在网上根本找不到解决方法，造成了一些麻烦。

参考文献

Vxe-table官方文档