技術標籤：# Vue表格

<div id="tabContainer" style="height:100%;width:100%;">
	<el-table :data="infoTableData" cell-style="padding:6px" ref="infoTableData" border highlight-current-row>
		<el-table-column prop="resId" label="資源ID"
 
  align="left" sortable></el-table-column>
		<el-table-column prop="resName" label="資源名稱" align="left"></el-table-column>
	</el-table>
</div>

function init(){
	this.template='#testId',
	this.data=function () {
		return {
			infoTableData :
 
 []
		}
	},
	this.methods = {
		fillData : function(){
			var _self = this;
			var _data = [];
			var obj1 = {};
			obj1.resId = "13.11";
			obj1.resName = "A";
			var obj2 = {};
			obj2.resId = "4.5";
			obj2.resName = "B";
			var obj3 = {};
			obj3.resId = "2.1"
 
;
			obj3.resName = "C";
			_self.infoTableData.push(obj1);
			_self.infoTableData.push(obj2);
			_self.infoTableData.push(obj3);
		}
	},
	this.mounted=function(){
		this.fillData();
	}
}

排序前：

排序後：

排序顯然是錯誤的，錯誤原因是我們將排序欄位的型別設定成字串了。因此在排序時，也是將其當作是字串而非 double 型別的數值進行排序

解決方法就是將待排序欄位設定成數值型別，如果涉及到單位顯示，可以參考如下方式：

<el-table-column prop="cpuUsage" label="CPU使用率" align="left" sortable>
	<template slot-scope="scope">
		<span v-else-if="scope.row.cpuUsage > 90" style="color:#FF585F;">
			{{scope.row.cpuUsage}}%
		</span>
		<span v-else>
			{{scope.row.cpuUsage}}%
		</span>
	</template>
</el-table-column>