elementUI el-table组件,数据筛选,数据回显,单选,多选

多选

elementUI el-table组件,数据筛选,数据回显,单选,多选_第1张图片
:filtered-value="filteredValue" 回显数据方法

//tableData 后台返回数据进行渲染

<el-table ref="filterTable"  :data="tableData">
	<el-table-column  prop="now_status" label="状态" 
      :filter-method="filterTag1" :filters="filtersZT" :filtered-value="filteredValue">
	      <template slot-scope="scope">
	          <span >{{ status[scope.row.RunStatus] }}</span>
	      </template>
 	 </el-table-column> 
</el-table>

:filters="filtersZT" 定义数据中显示的内容

<script>
export default {
    
    data() {
	        return {
	        tableData:[
	        	{
		        	id:1,
		        	'RunStatus':1,
		        	'name':'名称1'
	        	},
	        	{
		        	id:2,
		        	'RunStatus':2,
		        	'name':'名称2'
	        	},
	        	{
		        	id:3,
		        	'RunStatus':99,
		        	'name':'名称3'
	        	}
	        ],
	        filtersZT:[
			  { text: '名字动99', value: 99 },
			  { text: '名字动-1', value: -1 },
			  { text: '名字动0', value: 0 },
			  { text: '名字动1', value: 1 },
			  { text: '名字动2', value: 2 },
			  { text: '名字动3', value: 3 },
			  { text: '名字动4', value: 4 },
			  { text: '名字动5', value: 5 },
			  { text: '名字动6', value: 6 },
			  { text: '名字动6', value: 7 },
			  { text: '名字动8', value: 8 },
			  { text: '名字动9', value: 9 },
			  { text: '名字动10', value: 10 },
			  { text: '名字动11', value: 11 }
			],
			// 根据状态 自定义名称
			status : {
				  '-1':'名字动-1',
				  0: '名字动0',
				  1: '名字动1',
				  2: '名字动2',
				  3: '名字动3',
				  99: '名字动99',
				  4: '名字动4',
				  5: '名字动5',
				  6: '名字动6',
				  7: '名字动7',
				  8:'名字动8',
				  9: '名字动9',
				  10: '名字动10',
				  11: '名字动11',
				},
				filteredValue:[]
	        }
        }
   }
//  RunStatus是后台返回的数据tableData中的属性
filterTag1(value, row) {
   return row['RunStatus'] == value;
},
//回显数据方法 写在需要回显的地方调用,只需赋值filtersZT中的value
info(){
	this.filteredValue = [4, 5, 6, 7, 8, 9, 10, 11, 99]
	//如果不显示 强制更新页面
	 this.$forceUpdate();
}

单选

请看这篇文章
vue element ui table过滤器筛选设置为单选

你可能感兴趣的:(elementui,vue.js,前端)