pmo-filter

Installing

Using npm:

npm install pmo-filter

Example

  /* 引入 */
  import Filter from '@/components/filter';

  /* 调用 */
  <v-filter
    :filterData="filterData"
    :extraFilterData="extraFilterData" ref="filterComponent">
    <div class="filter-btn-area">
      <el-button type="primary" @click.stop="handleButtonClick">筛选</el-button>
    </div>
  </v-filter>

Attributes

参数	说明	类型	可选值	默认值
filterData	默认显示过滤项数据	array	—	[]
extraFilterData	额外过滤项数据	array	—	[]

Events

事件名称	说明	回调参数
getFilterData	获取组件调用组件内的 getFilterData 方法	过滤后的数据

Data 数据类型

  const filterData = [
    // 单选框
    {
      text: '单选类型',
      name: 'userSelect',
      type: 'radio',
      value: 'radio01',
      options: [
        {
          label: '单选1',
          value: 'radio01'
        },
        {
          label: '单选2',
          value: 'radio02'
        },
        {
          label: '单选3',
          value: 'radio03'
        },
        {
          label: '单选4',
          value: 'radio04'
        }
      ]
    },
    // 多选框
    {
      text: '多选类型',
      name: 'kapian',
      type: 'checkbox',
      value: [],
      options: [
        {
          label: '多选一',
          value: 'checkbox1'
        },
        {
          label: '多选二',
          value: 'checkbox2'
        },
        {
          label: '多选三',
          value: 'checkbox3'
        }
      ]
    },
    // 固定日期
    {
      text: '单日期类型',
      name: 'online',
      type: 'date',
      value: ''
    },
    // 日期范围
    {
      text: '开始结束日期类型',
      name: 'customTime',
      type: 'daterange',
      value: {
        begin: '',
        end: ''
      }
    },
    // 文本类型
    {
      text: '文本类型',
      name: 'desc',
      type: 'input',
      value: ''
    }
  ];