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

多选

在这里插入图片描述
: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过滤器筛选设置为单选

相关推荐

  1. Element-ui el-table//跨页勾讲解

    2023-12-13 10:46:04       17 阅读
  2. ElementUi Table

    2023-12-13 10:46:04       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-13 10:46:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-13 10:46:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-13 10:46:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-13 10:46:04       18 阅读

热门阅读

  1. vue实现悬浮窗拖动的自定义指令

    2023-12-13 10:46:04       30 阅读
  2. SQL命令---带关系运算符的条件查询

    2023-12-13 10:46:04       44 阅读
  3. 《C++新经典设计模式》之第5章 观察者模式

    2023-12-13 10:46:04       30 阅读
  4. 机器学习中的 K-均值聚类算法及其优缺点

    2023-12-13 10:46:04       35 阅读
  5. Kotlin学习笔记1

    2023-12-13 10:46:04       30 阅读
  6. logstash同步mysql数据到es(二、jdbc_driver_library问题)

    2023-12-13 10:46:04       33 阅读