element ui table组件筛选数据

需求：element ui table组件筛选全部数据

                                                      element ui 文档

注意：

1. @filter-change 要写在table根元素，也就是<el-table @filter-change="filterChange"></el-table>

2. 需要筛选的项，要写上 :column-key=" ' aaa ' " 

3. 要搜索全局，就要去掉对应筛选项的 :filter-method="xx"。 

ps:   filter-method 筛选当前页面，不会请求后端接口，条数多的话，会造成死循环

 

filter-method

methods:{

   filterChange(filters){ // 自定义筛选规则

    if(filters.aaa){ // 无论单选多选都是拿到一个数组，如果需要数字需要相应的转换

// 单选，需要传数字给后端，所以我直接取 this.xx = filters.aaa[0]

        this.getAll() // 调用筛选的方法

    }

 }

}

粘贴代码如下：

<el-table
      :data="tableData"
      highlight-current-row
      v-loading="listLoading"
      element-loading-text="请稍后..."
      style="width: 100%;"
      @filter-change="filterTagTable"
    >
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <el-table-column prop="content" label="提交内容" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column
        prop="replied"
        label="回答状态"
        align="center"
        width="120"
        :filter-multiple="false"
        :filters="filterStatus"
        filter-placement="bottom-end"
        :column-key="'aStatus'"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.replied">已回答</el-tag>
          <el-tag type="info" v-else>未回答</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更多" align="right" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
          >查看详情</el-button>
          <el-button size="mini" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

data(){
  return {
    filterStatus: [{ text: "已回答", value: 1 }, { text: "未回答", value: 0 }],
    listQuery:{
      status:''
    }
  }
},
methods:{
filterTagTable(filters){
if(filters.aStatus){
this.listQuery.status = filters.aStatus[0]
}
this.getAll() // 筛选所选项下的所有数据，需要调用后端接口
}}

链接：https://www.jianshu.com/p/98e09633afb0