个人技术总结 (vex-table)

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

  3. 技术详述
  4. Vxe-table由三个部分组成,表格样式,表格数据,表格方法。以此次作业的项目中一个页面的表格为例。

    效果图

    个人技术总结 (vex-table)_第1张图片

    表格样式

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

    代码

    
        
        
            
        
        
        
        
            
        
        
        
        
        
        
            
        
    
    

    表格数据

    使用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

  5. 技术使用中遇到的问题和解决过程。
  6. 问题:有时候类似性别或者班级这种信息会用数字来保存,比如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在表格中显示。

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

  9. 参考文献
  10. Vxe-table官方文档

你可能感兴趣的:(个人技术总结 (vex-table))