vue 筛选功能---filters

Posted 2021-07-17 小小菜_v

Vue 前端做筛选功能—filters

template:

<el-table-column
 v-if="columnsStatus[10].checked"
 :sortable="columnsStatus[10].sortable"
 :prop="columnsStatus[10].column"
 :label="columnsStatus[10].label"
 :width="columnsStatus[10].width"
 show-overflow-tooltip
 :filters="[{value:'yes', text:'yes'},{value:'no', text:'no'}]"
 :filter-method="filterIFModfy"
 >
	 <template slot-scope="scope">
		 <!-- 引用elementUI的星标-->
		 <i :class="'el-icon-star-'+[scope.row[columnsStatus[10].column]==1?'on':'off']" circle></i>
	 </template >
</el-table-column>

script:

return{
	form:{
		if_modify_gb : ""
	},
	columnsStatus:[
		{
			label: "是否变更", //表格栏名
			column: "if_modify_gb " //后端获取的对应的字段名
			checked: true, //是否有选择框
			show: true, //是否显示
			sortable: false //是否排序
			}
	]
},
methods:{
filterIFModfy(value, row, column){
	if (value === "yes"){
		value = 1
	}else{
		value = 0
	}
	return row.if_modify_gb === value
}
}

以上就实现了表格栏中的筛选