vue+elementui的el-table下filters过滤器的使用 小白

栾和玉
2023-12-01
      <el-table-column prop="sex" label="性别" :filters="filterList" :filter-method="handleFilterChange">
          <template slot-scope="scope">
            {{sexValue[scope.row.mold]}}
          </template>
        </el-table-column>
//这里是拿到tableData的所有sex性别属性,但是筛选的下拉框只有男/女 所有[...new Set()]去重复
    var aaa = [
      ...new Set(this.tableData.map((item) => this.sexValue[item.sex]))
    ]
    //这里可以用map,但我对reduce情有独钟。
    //因为官网规定filters的是Array[{text,value}]这种格式,所有我们弄成官网需要的格式
    this.filterList = aaa.reduce((acc, item, index) => {
      acc.push({
        text: item,
        value: index
      })
      return acc
    }, [])
    //这样我们就可以看筛选的下拉框了。还有配置下拉规则

根据官网,filter-mothod是筛选的方法,这步可以直接复制,不用改动。column下有个叫’property’的属性,值就是prop绑定的值,这里是sex。所以 row.sex === value 这步应该很清楚了,不理解console就能明白了

//:filter-method="handleFilterChange"  
    handleFilterChange(value, row, column) {
      const property = column['property']
      return row[property] === value
    },

 类似资料: