TableFilter 表格筛选

基础用法

<template>
  <plv-table-filter v-model="filter">
    <plv-table-filter-item type="shortcuts" prop="date"></plv-table-filter-item>
    <plv-table-filter-item type="daterange" prop="date"></plv-table-filter-item>
    <plv-table-filter-item type="search"></plv-table-filter-item>
    <plv-table-filter-item right>
      <plv-button type="operate" size="medium">导出列表</plv-button>
    </plv-table-filter-item>
  </plv-table-filter>
</template>

<script>
  export default {
    data() {
      return {
        filter: {
          date: ''
        }
      };
    }
  };
</script>

显示代码

下拉框

<template>
  <plv-table-filter v-model="filter">
    <plv-table-filter-item type="shortcuts" prop="date"></plv-table-filter-item>
    <plv-table-filter-item type="select" prop="channelId" :select-config="{ options: selects }"></plv-table-filter-item>
    <plv-table-filter-item type="search"></plv-table-filter-item>
    <plv-table-filter-item right>
      <plv-button type="operate" size="medium">导出列表</plv-button>
    </plv-table-filter-item>
  </plv-table-filter>
</template>

<script>
  export default {
    data() {
      return {
        filter: {
          date: '',
          channelId: ''
        },
        selects: [{
          value: 1,
          label: '选项1'
        }, {
          value: 2,
          label: '选项2'
        }]
      };
    }
  };
</script>

显示代码

TableFilter Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Object	-	{}
target	触发绑定值修改事件类型，search-点击查询触发，change-组件值修改与点击查询时触发	String	search change	search

TableFilterItem Attributes

参数	说明	类型	可选值	默认值
type	类型	String	shortcuts daterange select	-
prop	绑定值的字段	String	-	-
right	组件是否偏向右侧，filter组件为流式布置，设置此值后item会添加margin-left: auto;	Boolean	-	false
select-config	select 类型下的参数	Obect	-	-
start-date-config	开始日期参数	Object	-	{}
end-date-config	结束日期参数	Object	-	{}

Events

事件名称	说明	回调参数
search	搜索事件触发	绑定对象