iview-filter-list v1.0.0

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

events

联系

如有疑问，请联系邮件：490106135@qq.com