個人技術總結 (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總體還是一個很強大的表格插件，主要是解決了我們實現動態可編輯表格的需求。但是文檔寫的不是很清楚，而且這是一個相對冷門的技術，網上有關它的教程與討論少之又少，開發中遇到問題有時候在網上根本找不到解決方法，造成了一些麻煩。

參考文獻

Vxe-table官方文檔