Этот вопрос закрыт для ответов, так как повторяет вопрос Как мне сделать фильтрации таблицы?

Как сделать фильтрацию для таблицы?

Как сделать так чтобы данные фильтровались, сейчас на данный момент они сортируются, но мне пока что не понятно, потому что новичок в этом деле
Вот код по формирование данных
<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Фамилия" v-model="filterItems.last_name">
                {{ filterItems.last_name }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Имя" v-model="filterItems.name">
                {{ filterItems.name }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Отчество" v-model="filterItems.patronymic">
                {{ filterItems.patronymic }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="email" v-model="filterItems.email">
                {{ filterItems.email }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="phone" v-model="filterItems.phone">
                {{ filterItems.phone }}
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Непосредственный руководитель" v-model="filterItems.immediate_supervisor">
                {{ filterItems.immediate_supervisor }}
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="selectAll" @click="select"></th>
                    <th v-for="column in data_columns" @click="sortBy(column.name)">{{ column.label }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(employee, index) in sortedUsers" :key="employee.id">
                    <td><input type="checkbox" :value="employee.id" v-model="selected"></td>
                    <td>
                        <a id="show-modal" @click="select_item(index)">{{ employee.last_name+' '+employee.name+' '+employee.last_name }}</a>
                    </td>
                    <td>{{ employee.email }}</td>
                    <td>{{ employee.phone }}</td>
                    <td>{{ employee.immediate_supervisor }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "BaseTable",
        props:[
            'data_table',
            'data_columns'
        ],
        data(){
            return {
                filterItems: {
                    last_name: '',
                    name: '',
                    patronymic: '',
                    email: '',
                    phone: '',
                    immediate_supervisor: '',
                },
                sort: 'id',
                sortDir: 'asc',
                itemsNew: [],
                items: [],
                item:{},
                selected: [],
                selectAll: false,
                showModal: false
            }
        },
        methods: {
            select_item(index){
                this.item = this.items[index];
                this.showModal = true;
            },
            select() {
                this.selected = [];
                if (!this.selectAll) {
                    for (let i in this.$props.data_table){
                        this.selected.push(this.$props.data_table[i].id);
                    }
                }
            },
            sortBy: function(s) {
                if (s === this.sort) {
                    this.sortDir = (this.sortDir === 'asc') ? 'desc' : 'asc';
                } else {
                    this.sortDir = 'asc';
                }
                this.sort = s;
            },
        },
        computed: {
            sortedUsers: function() {
                return this.items.sort((a, b) => {
                    let dir = (this.sortDir === 'asc') ? 1 : -1;
                    if (a[this.sort] < b[this.sort]) {
                        return -1 * dir;
                    } else if (a[this.sort] > b[this.sort]) {
                        return  1 * dir;
                    } else {
                        return 0;
                    }
                }).filter(() => {
                    let filterItems = this.filterItems;
                    this.itemsNew = this._.filter(this.items, function (item) {
                        return item.name === filterItems.name ||
                            item.last_name === filterItems.last_name ||
                            item.patronymic === filterItems.patronymic ||
                            item.email === filterItems.email ||
                            item.phone === filterItems.phone ||
                            item.immediate_supervisor === filterItems.immediate_supervisor;
                    });
                    return this.itemsNew[0] ? this.itemsNew : this.items;
                });
            },
        },
        created(){
            const employeeApi = new restApi(this.$props.data_table);
            employeeApi.list().then(response => {
                this.items = response.data;
            }).catch(error => {
                debugger;
            });
        }
    }
</script>

<style scoped>

</style>

то есть весь код по формирование находиться sortedUsers вcomputed
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 1
shmatuan
@shmatuan
Vue, Node, RoR
Очень странный код в .filter находится
По сути проходя каждый элемент - каждый раз проверяется опять ВЕСЬ СПИСОК и даже фильтрует, но всё равно каждый раз возвращает или елемент который был, или елемент которые нашёлся, поэтому в итоге получается тот же массив.

Скорее нужно как-то так
return this.items
    ...
    .filter((item) => {
             return 
                  item.name.toLowerCase().indexOf(this.filterItems.name) > -1 ||
                  item.last_name.toLowerCase().indexOf(this.filterItems.last_name ) > -1 ||
                  // и остальные так же; Этот код ищет в имени символы с поисковой строки
                });


Или лучше было бы переделать через pipes воообще
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы