列数据筛选

基础用法

属性	值	说明
:headerData	{slot: "xxx"}	预留插槽位置，用于指定在哪一列渲染筛选列，例：{slot: "date"}

使用插槽，插槽中使用如下两个属性

属性	值	说明
:filters	{text: 'xxx1', value: 'xxx2'}	text：筛选项显示内容，value：筛选项实际筛选的值
:filter-method	函数名	传入一个函数，用于筛选需要显示的数据

html示例：

<yui-table
    :rowData="rowData数据对象"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
>
</yui-table>

<template #date>

  <el-table-column
    prop="date"
    label="日期"
    sortable
    width="180"
    column-key="date"
    :filters="filters"
    :filter-method="filterHandler"
  >
  </el-table-column>

</template>

vue.js示例

<script lang="ts">  
   data() {
      return {
        // 表头筛选项数据
        filters: [
          {text: '2016-05-02', value: '2016-05-02'},
          {text: '2016-05-03', value: '2016-05-03'},
          {text: '2016-05-04', value: '2016-05-04'},
          {text: '2016-05-05', value: '2016-05-05'},
          {text: '2016-05-06', value: '2016-05-06'},
        ],
    },
  
  methods: {
      // 筛选处理函数
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },

    },

</script>

效果

注意事项

建议此处使用状态、等级、性别等分类较少的简单筛选，或者筛选项较少时使用，更复杂的筛选功能在搜索区域实现