技術標籤：# 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"></el-table-column>
		<el-table-column prop="resName" label="資源名稱" align="left"></el-table-column>
		<el-table-column prop="level" label="告警級別"  align="center" width="100" :filters
 
="levelFilter" :filter-method="filterHandler">
			<template slot-scope="scope">
				<i v-if="scope.row.level == 3" class="el-icon-bell"  title="嚴重告警" style="font-size:15px;color:#FF585F;"></i>
				<i v-else-if
 
="scope.row.level == 2" class="el-icon-warning"  title="中等告警" style="font-size:15px;color:#FF9232;"></i>
				<i v-else-if="scope.row.level == 1" class="el-icon-warning"  title="一般告警" style="font-size:15px;color:#FFD485;"></i>
			</template>
		</el-table-column>
	</el-table>
</div>

function init(){
	this.template='#testId',
	this.data=function () {
		return {
			infoTableData : [],
			levelFilter:[{text:'一般',value:1},{text:'中等',value:2},{text:'嚴重',value:3}]
		}
	},
	this.methods = {
		fillData : function(){
			var _self = this;
			var _data = [];
			var obj1 = {};
			obj1.resId = 1;
			obj1.resName = "A";
			obj1.level = 1;
			var obj2 = {};
			obj2.resId = 2;
			obj2.resName = "B";
			obj2.level = 2;
			var obj3 = {};
			obj3.resId = 3;
			obj3.resName = "C";
			obj3.level = 3;
			_self.infoTableData.push(obj1);
			_self.infoTableData.push(obj2);
			_self.infoTableData.push(obj3);
		},
		filterHandler(value, row, column) {
		   const property = column['property'];
		   return row[property] === value;
		}
	},
	this.mounted=function(){
		this.fillData();
	}
}

效果：

篩選前：

篩選：

篩選後：