ConditionFilter 筛选条件

基础用法

<template>
  <plv-condition-filter v-model="value" @search="handleSearch">
    <plv-condition-filter-item prop="city" label="城市" type="select" :select-options="citys" />
    <plv-condition-filter-item prop="dates" label="选择日期" type="daterange" />
    <plv-condition-filter-item prop="keyword" label="关键词" type="input" placeholder="请输入搜索关键词" />

    <plv-condition-filter-item type="search" />
  </plv-condition-filter>
</template>

<script>
export default {
  data() {
    return {
      value: {
        city: '',
        dates: [],
        keyword: '',
      },

      citys: [
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        { value: 'beijing', label: '北京' },
      ],
    };
  },

  methods: {
    handleSearch(data) {
      console.log(this.value);
    }
  }
}
</script>

显示代码

右侧插槽

<template>
  <plv-condition-filter v-model="value" @search="handleSearch">
    <plv-condition-filter-item prop="city" label="城市" type="select" :select-options="citys" />
    <plv-condition-filter-item prop="dates" label="选择日期" type="daterange" />
    <plv-condition-filter-item prop="keyword" label="关键词" type="input" placeholder="请输入搜索关键词" />

    <template #right>
      <plv-condition-filter-item type="search" />
    </template>
  </plv-condition-filter>
</template>

<script>
export default {
  data() {
    return {
      value: {
        city: '',
        dates: [],
        keyword: '',
      },

      citys: [
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        { value: 'beijing', label: '北京' },
      ],
    };
  },

  methods: {
    handleSearch(data) {
      console.log(this.value);
    }
  }
}
</script>

显示代码

所有功能

<template>
  <plv-condition-filter v-model="value" @search="handleSearch">
    <plv-condition-filter-item prop="city" label="下拉选择" type="select" :select-options="citys" />
    <plv-condition-filter-item prop="keyword" label="输入框" type="input" placeholder="请输入搜索关键词" />
    <plv-condition-filter-item prop="dates" label="日期范围" type="daterange" />
    <plv-condition-filter-item prop="date" label="日期选择" type="date" />
    <plv-condition-filter-item prop="month" label="月份选择" type="month" />

    <template #right>
      <plv-condition-filter-item type="search" />
    </template>
  </plv-condition-filter>
</template>

<script>
export default {
  data() {
    return {
      value: {
        city: '',
        dates: [],
        keyword: '',
        date: '',
        month: '',
      },

      citys: [
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        { value: 'beijing', label: '北京' },
      ],
    };
  },

  methods: {
    handleSearch(data) {
      console.log(this.value);
    }
  }
}
</script>

显示代码

ConditionFilter Attributes

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

ConditionFilterItem Attributes

参数	说明	类型	可选值	默认值
type	类型，date-日期选择、month-月份选择、daterange-日期范围、select-选择器、input-输入框	String	date month daterange select input search	-
width	内容的宽度	String Number	-	-
label	标题	String	-	-
placeholder	占位文本	String	-	-
prop	绑定值的字段	String	-	-
select-props	select 类型下的参数	Obect	-	-
select-all	是否显示“全部”选择项，仅 select 类型下适用	Boolean	-	true
select-options	选择器下拉选项，仅 select 类型下适用	Array	-	-
select-options-field	选择器options自定义字段名，仅 select 类型下适用	Object	-	{}
date-picker-props	日期类型下的参数	Object	-	-
allow-date	设置可允许选择的日期，同 DatePicker，仅日期类型下适用	Date Date[] Function(Date)	-	-
allow-month	设置可允许选择的月份，同 DatePicker，仅日期类型下适用	Date Date[] Function(Date)	-	-
disabled-date	设置某日期的禁用状态，同 DatePicker，仅日期类型下适用	Date Date[] Function(Date)	-	-
disabled-month	设置某月份的禁用状态，同 DatePicker，仅日期类型下适用	Date Date[] Function(Date)	-	-
disabled-after-now	禁用今天（今月）之后的日期选择，同 DatePicker，仅日期类型下适用	Boolean	-	false
disabled-before-now	禁用今天（今月）之前的日期选择，同 DatePicker，仅日期类型下适用	Boolean	-	false
disabled-across-month	禁止跨月查询，同 DatePicker，仅日期类型下适用	Boolean	-	false
input-props	input 类型下的参数	Object	-	-
search-label	选择按钮文本，仅 search 类型适用	String	-	查询
search-props	选择按钮参数，仅 search 类型适用	Object	-	-

Events

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