Vue中的vxe-table教程9-表格筛选

知识点：三种筛选方式：1. Name多选筛选方式2. Sex单选筛选方式，:filter-multiple="false"3. Age输入数据判等筛选方式总结：通过设置 filters 属性和 filter-method 方法可以开启列筛选功能，通过 filter-multiple=false 设置为单选可以设置默认值:checked: true，默认筛选哪一项效果图：1. index.html代

专职

9258人浏览 · 2021-01-12 15:04:34

专职 · 2021-01-12 15:04:34 发布

知识点：

三种筛选方式：

1. Name多选筛选方式

2. Sex单选筛选方式，:filter-multiple="false"

3. Age输入数据判等筛选方式

总结：通过设置 filters 属性和 filter-method 方法可以开启列筛选功能，通过 filter-multiple=false 设置为单选

可以设置默认值:checked: true，默认筛选哪一项

效果图：

1. index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 20px 50px 0 50px">
            <!--
                三种筛选方式：
                1. Name多选筛选方式
                2. Sex单选筛选方式，:filter-multiple="false"
                3. Age输入数据判等筛选方式
                总结：通过设置 filters 属性和 filter-method 方法可以开启列筛选功能，通过 filter-multiple=false 设置为单选
                可以设置默认值:checked: true，默认筛选哪一项
            -->
            <vxe-table
                    border
                    highlight-hover-row
                    :data="tableData">
                <vxe-table-column field="id" title="ID"></vxe-table-column>
                <vxe-table-column field="name" title="Name" sortable
                                  :filters="[{label: 'id大于10002', value: 10002, checked: true}, {label: 'id大于10003', value: 10003}]"
                                  :filter-method="filterNameMethod"></vxe-table-column>
                <vxe-table-column field="sex" title="Sex" sortable
                                  :filters="[{label: '男', value: 'Man'}, {label: '女', value: 'Women'}]"
                                  :filter-method="filterSexMethod"
                                  :filter-multiple="false"></vxe-table-column>
                <vxe-table-column field="age" title="Age" :filters="[{data: ''}]" :filter-method="filterAgeMethod">
                    <template v-slot:filter="{ $panel, column }">
                        <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data"
                               @input="$panel.changeOption($event, !!option.data, option)">
                    </template>
                </vxe-table-column>
                <vxe-table-column field="address" title="Address" sortable></vxe-table-column>
            </vxe-table>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js代码

var Main = {
    data() {
        return {
            tableData: [
                {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃'},
                {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
                {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
                {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai'},
                {id: 10005, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃'},
                {id: 10006, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
                {id: 10007, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
                {id: 10008, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai'}
            ],
        }
    },
    methods: {
        filterNameMethod({value, row}) {
            return row.id > value
        },
        filterSexMethod({value, row}){
            return row.sex === value
        },
        filterAgeMethod({option, row}) {
            return row.age === Number(option.data)
        }
    },
};

var app = new Vue(Main).$mount('#app');

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐