element-ui框架table表格的列筛选 获取值传给后端

由于数据需要根据列筛选选中的值做特殊的处理，所以我要把选中值传到后端。

代码：

<el-table
   :data="tableData"
   style="width: 100%"
   @filter-change="handleFilterChange">
      <el-table-column
      prop="tag"
      label="标签"
      column-key="nv_date"
      :filters="filterList">
    </el-table-column>
</el-table>


<script>
    export default {
        data() {
            return {
                filterList: [
                    {text: '2019-08-06',value: '2019-08-06'},
                    {text: '2019-07-06',value: '2019-07-06'},
                    {text: '2019-06-06',value: '2019-06-06'}],
                selectList: []
            }
        },
        methods: {
            handleFilterChange(val){
                // console.info(val)
                this.selectList= val['nv_date']
                // 调用API
            },
        }
    }

</script>

关键：

1、给el-table-column绑定需要筛选的项   :filters

2、给el-table绑定:filter-change事件,当筛选项发现变化时调用该事件

3、给筛选列定义:column-key属性，因为可以直接根据列的key值获取数据

 

如有问题，欢迎交流~！