iview-filter-table

一個(gè)基于iView Table 的帶搜索過濾的Table組件, 支持 Input輸入框、Select下拉框异赫、DatePicker時(shí)間框三種表格篩選方式.

使用

模板：

<div>
  <FilterTable :columns="columns" :data="data" @on-search="onSearch"></FilterTable>
</div>

列描述數(shù)據(jù)對(duì)象：

ageOptions = [
    {
        value: '',
        name: '全部'
    },
    {
        value: 18,
        name: '18'
    },
    {
        value: 26,
        name: '26'
    },
    {
        value: 30,
        name: '30'
    },
];

columns = [
    {
        title: "姓名",
        key: "name",
        width: this.columnWidth,
        filter: {
            type: 'Input',
            stype: 'text',
            placeholder: '請(qǐng)輸入姓名',
            size: this.tableSize,   // 和table的size盡量一致
            margin: '5px auto',
        }
    },
    {
        title: "日期",
        key: "date",
        width: this.columnWidth,
        filter: {
            type: 'DatePicker',
            stype: 'date',
            placeholder: '選擇日期',
            size: this.tableSize,   // 和table的size盡量一致
            margin: '5px auto',
        }
    },
    {
        title: "地址",
        key: "address",
        width: this.columnWidth,
        filter: {
            type: 'Input',
            stype: 'text',
            placeholder: '請(qǐng)輸入地址',
            size: this.tableSize,   // 和table的size盡量一致
            margin: '5px auto',
        }
    },
    {
        title: "家庭地址",
        key: "homeAddress",
        stype: 'text',
        width: this.columnWidth,
        filter: {
            type: 'Input',
            placeholder: '請(qǐng)輸入地址',
            size: this.tableSize,   // 和table的size盡量一致
            margin: '5px auto',
        }
    },
    {
        title: "年齡",
        key: "age",
        width: this.columnWidth,
        filter: {
            type: 'Select',
            options: this.ageOptions,
            placeholder: '請(qǐng)選擇',
            size: this.tableSize,   // 和table的size盡量一致
            margin: '5px auto',
        }
    },
    {
        title: "功能",
        key: "action",
        width: 150,
        align: 'center',
        fixed: "right",
        render: (h, params) => {
            return h("div", [
                h("Button", {
                    props: {
                        type: "primary",
                        size: "small"
                    },
                    style: {
                        marginRight: "5px"
                    },
                    on: {
                        click: () => {
                            this.showIndex(params.index)
                        }
                    }
                }, "View"),
                h("Button", {
                    props: {
                        type: "error",
                        size: "small"
                    },
                    on: {
                        click: () => {
                            this.removeIndex(params.index)
                        }
                    }
                }, "Delete")
            ]);
        }
    }
];

下拉框數(shù)據(jù)：

ageOptions = [
    {
        value: '',
        name: '全部'
    },
    {
        value: 18,
        name: '18'
    },
    {
        value: 26,
        name: '26'
    },
    {
        value: 30,
        name: '30'
    },
];

觸發(fā)搜索事件：

        onSearch(search) {
            let data = [];
            for (let item of this.data1) {
                if (this.screen(Object.values(item), Object.values(search))) {
                    data.push(item)
                }
            }
            this.data = data;
        }

在該方法中進(jìn)行條件過濾椅挣，更新data 屬性的值。

直接運(yùn)行該項(xiàng)目可以看當(dāng)前組件的Table效果祝辣。

image-20190403103056324

image-20190403103126114

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

Github源碼地址 <https://github.com/xinlei3166/iview-filter-table