v-table-filter

基于Vue、element-ui的通用表格筛选器,支持高级模式和精简模式,只需简单的配置即可,拿来即用。

Usage no npm install needed!

<script type="module">
  import vTableFilter from 'https://cdn.skypack.dev/v-table-filter';
</script>

README

v-table-filter

基于Vue、element-ui的通用表格筛选器,支持高级模式和精简模式,只需简单的配置即可,拿来即用。

Installing

install with npm

npm install --save v-table-filter

Import into your component:

import TableFilter from 'v-table-filter';
export default{
    components:{TableFilter}
}

Useage:


<TableFilter :filterSchema="filterSchema" :listQuery="listQuery" @change="search"></TableFilter>

export default {
    components: {TableFilter},
    data() {
        return {
            listQuery: {}, 
            filterSchema:[
                { "prop": "name", "label": "姓名"},
                { "prop": "birth", "label": "生日","type":"date" },
                { "prop": "range", "label": "时间范围","type":"daterange" },
                { "prop": "city","label": "城市","type":"select", "options":[{"label":"北京","value": "beijing"},{"label":"上海","value": "shasnghai"}],"default": "beijing","all":true}
            ]
        }
    },
    methods: {
        search(){
            console.log(this.listQuery)
        },
    }
}