iview-filter-list

概述

iview-filter-list是基于iview组件库开发的可过滤列表，使用灵活的JSON配置去渲染组件，支持行操作。需要注意的是，iview-filter-list必须在安装了iview的基础上再安装使用。

安装

npm install iview-filter-list --save

使用

<template>
  <div id="app">
    <filter-list :data="data" v-model="selectItem" :filter-method="filterMethod"/>
  </div>
</template>

<script>
import FilterList from 'iview-filter-list'

export default {
  name: 'app',
  components: { FilterList },
  data() {
    return {
      selectItem: null,
      data: [
        {
          icon: {
            type: 'android-clipboard',
            color: '#FF6167'
          },
          label: 'list1',
          value: 'list1',
          buttons: [
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large',
              onClick(item) {
                console.log(item)
              }
            },
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large'
            }
          ]
        },
        {
          label: 'list2',
          value: 'list2',
          buttons: [
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large'
            },
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large'
            }
          ]
        },
        {
          label: 'list3',
          value: 'list3',
          buttons: [
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large'
            },
            {
              tooltip: '删除',
              color: '#FF6167',
              type: 'text',
              shape: 'circle',
              icon: 'trash-b',
              size: 'large'
            }
          ]
        }
      ]
    }
  },
  methods: {
    filterMethod(keyword) {
      return this.data.filter(item => (item.base && item.base.toLowerCase().indexOf(keyword.toLowerCase()) > -1) || item.value.toLowerCase().indexOf(keyword.toLowerCase()) > -1)
    }
  }
}
</script>

API

props

属性|说明|类型|默认值 -|-|-|- value|列表选中项，可使用v-model双向绑定|Object|空 placeholder|搜索框的占位符|String|无 data|列表数据|Array|null bindProps|列表绑定的value和label|Object|{ value: 'value', label: 'label' } filter-method|过滤方法，在搜索框输入文本时会根据该方法过滤数据，如不提供，默认根据绑定的label过滤，方法自带一个参数，为搜索框的值|Function|-

events

事件名|说明|返回值 -|-|- on-select-item-change|选中项改变时触发|新的选中项

联系

如有疑问，请联系邮件：[email protected]