Code前端首页关于Code前端联系我们
首页 前端开发Vue正文

深入探索Vuetify中Filter与Table的应用

terry 7个月前 (04-18) 阅读数 158 #Vue
文章标签 Table

Vuetify框架概述

Vuetify是一个基于Vue.js的Material Design框架，它为开发者提供了丰富且美观的UI组件，极大地简化了前端界面的开发流程，凭借其简洁易用的API和遵循Material Design规范的设计，Vuetify在Vue项目中被广泛应用，无论是小型项目的快速搭建，还是大型企业级应用的界面构建，都能发挥出强大的作用。

Vuetify中的Table组件

1 Table组件基础

Vuetify的<v - table>组件是构建表格数据展示的核心组件，它具有高度的可定制性，能够轻松展示不同类型的数据，一个简单的基础表格可以如下构建：

<template>
  <v - table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v - for="(item, index) in users" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    };
  }
};
</script>

通过上述代码,我们创建了一个简单的表格，展示了用户的姓名和年龄信息。<v - table>组件会自动处理表格的样式和基本布局，使其符合Material Design的风格。

2 表格列的定制

Vuetify允许对表格列进行详细的定制,可以通过<v - table - column>组件来定义每一列的属性，我们可以设置列的宽度、对齐方式等。

<template>
  <v - table>
    <thead>
      <v - table - column width="200" align="center">姓名</v - table - column>
      <v - table - column align="right">年龄</v - table - column>
    </thead>
    <tbody>
      <tr v - for="(item, index) in users" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    };
  }
};
</script>

在上述代码中,我们使用<v - table - column>组件为“姓名”列设置了固定宽度为200px，并居中对齐，“年龄”列则设置为右对齐，这种定制使得表格在展示数据时更加清晰和美观。

3 表格的排序功能

在实际应用中,表格的排序功能是非常常见的需求，Vuetify的<v - table>组件原生支持排序功能，我们只需要在<v - table - column>组件上添加sortable属性，即可开启该列的排序功能。

<template>
  <v - table>
    <thead>
      <v - table - column sortable>姓名</v - table - column>
      <v - table - column sortable>年龄</v - table - column>
    </thead>
    <tbody>
      <tr v - for="(item, index) in sortedUsers" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      sortedUsers: []
    };
  },
  created() {
    this.sortedUsers = this.users.slice();
  },
  methods: {
    sortUsers(column) {
      const sortKey = column.text.toLowerCase();
      this.sortedUsers.sort((a, b) => {
        if (a[sortKey] < b[sortKey]) return -1;
        if (a[sortKey] > b[sortKey]) return 1;
        return 0;
      });
    }
  }
};
</script>

在上述代码中,我们为“姓名”和“年龄”列都添加了sortable属性，当用户点击列头时，sortUsers方法会被触发，根据点击的列对数据进行排序，并更新sortedUsers数组，从而实现表格数据的排序展示。

Vuetify中的Filter功能

1 简单的文本过滤

在处理表格数据时,过滤功能是必不可少的，Vuetify可以很方便地实现简单的文本过滤，我们可以通过一个输入框来过滤表格中的数据。

<template>
  <div>
    <v - text - field v - model="filterText" label="搜索姓名"></v - text - field>
    <v - table>
      <thead>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v - for="(item, index) in filteredUsers" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      filterText: '',
      filteredUsers: []
    };
  },
  created() {
    this.filteredUsers = this.users.slice();
  },
  watch: {
    filterText: {
      immediate: true,
      handler(newValue) {
        this.filteredUsers = this.users.filter(user => {
          return user.name.toLowerCase().includes(newValue.toLowerCase());
        });
      }
    }
  }
};
</script>

在上述代码中,我们创建了一个文本输入框，并使用v - model指令将其与filterText数据绑定，通过watch监听filterText的变化，当输入框内容改变时，使用filter方法对users数组进行过滤，只保留姓名中包含输入内容的用户，并更新filteredUsers数组，从而实现表格数据的过滤展示。

2 多条件过滤

实际应用中,往往需要进行多条件过滤，我们不仅要根据姓名过滤，还要根据年龄范围进行过滤。

<template>
  <div>
    <v - text - field v - model="nameFilter" label="搜索姓名"></v - text - field>
    <v - slider v - model="ageMin" :max="100" :min="0" label="最小年龄"></v - slider>
    <v - slider v - model="ageMax" :max="100" :min="0" label="最大年龄"></v - slider>
    <v - table>
      <thead>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v - for="(item, index) in multiFilteredUsers" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      nameFilter: '',
      ageMin: 0,
      ageMax: 100,
      multiFilteredUsers: []
    };
  },
  created() {
    this.multiFilteredUsers = this.users.slice();
  },
  watch: {
    nameFilter: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    },
    ageMin: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    },
    ageMax: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    }
  },
  methods: {
    applyFilters() {
      this.multiFilteredUsers = this.users.filter(user => {
        const nameMatch = user.name.toLowerCase().includes(this.nameFilter.toLowerCase());
        const ageMatch = user.age >= this.ageMin && user.age <= this.ageMax;
        return nameMatch && ageMatch;
      });
    }
  }
};
</script>

在上述代码中,我们增加了两个滑块来控制年龄范围，以及一个文本输入框用于姓名过滤，通过watch监听这三个数据的变化，并在变化时调用applyFilters方法，该方法通过filter对users数组进行多条件过滤，只保留符合姓名和年龄范围条件的用户，并更新multiFilteredUsers数组，实现了多条件过滤功能。

3 动态过滤

除了固定条件的过滤,有时还需要根据用户的动态选择进行过滤，提供一个下拉框让用户选择过滤的字段。

<template>
  <div>
    <v - select v - model="filterField" :items="filterFields" label="选择过滤字段"></v - select>
    <v - text - field v - model="filterValue" label="输入过滤值"></v - text - field>
    <v - table>
      <thead>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v - for="(item, index) in dynamicFilteredUsers" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      filterField: 'name',
      filterValue: '',
      filterFields: ['name', 'age'],
      dynamicFilteredUsers: []
    };
  },
  created() {
    this.dynamicFilteredUsers = this.users.slice();
  },
  watch: {
    filterField: {
      immediate: true,
      handler(newValue) {
        this.applyDynamicFilters();
      }
    },
    filterValue: {
      immediate: true,
      handler(newValue) {
        this.applyDynamicFilters();
      }
    }
  },
  methods: {
    applyDynamicFilters() {
      this.dynamicFilteredUsers = this.users.filter(user => {
        const value = user[this.filterField];
        if (typeof value ==='string') {
          return value.toLowerCase().includes(this.filterValue.toLowerCase());
        } else if (typeof value === 'number') {
          return value.toString().includes(this.filterValue);
        }
        return false;
      });
    }
  }
};
</script>

在上述代码中,我们通过<v - select>组件创建了一个下拉框，用户可以选择“姓名”或“年龄”作为过滤字段，同时通过文本输入框输入过滤值，通过watch监听filterField和filterValue的变化，调用applyDynamicFilters方法，根据用户选择的字段和输入的值对users数组进行动态过滤，并更新dynamicFilteredUsers数组，实现了动态过滤功能。

Filter与Table的结合应用

1 实时过滤展示

将过滤功能与表格结合,可以实现实时过滤展示数据，当用户在过滤输入框中输入内容或者调整过滤条件时，表格数据会实时更新，在前面多条件过滤的例子基础上，我们可以进一步优化代码，使得用户体验更加流畅。

<template>
  <div>
    <v - text - field v - model="nameFilter" label="搜索姓名"></v - text - field>
    <v - slider v - model="ageMin" :max="100" :min="0" label="最小年龄"></v - slider>
    <v - slider v - model="ageMax" :max="100" :min="0" label="最大年龄"></v - slider>
    <v - table :loading="isLoading">
      <thead>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v - for="(item, index) in multiFilteredUsers" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </v - table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      nameFilter: '',
      ageMin: 0,
      ageMax: 100,
      multiFilteredUsers: [],
      isLoading: false
    };
  },
  created() {
    this.multiFilteredUsers = this.users.slice();
  },
  watch: {
    nameFilter: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    },
    ageMin: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    },
    ageMax: {
      immediate: true,
      handler(newValue) {
        this.applyFilters();
      }
    }
  },
  methods: {
    applyFilters() {
      this.isLoading = true;
      setTimeout(() => {
        this.multiFilteredUsers = this.users.filter(user => {
          const nameMatch = user.name.toLowerCase().includes(this.nameFilter.toLowerCase());
          const ageMatch = user.age >= this.ageMin && user.age <= this.ageMax;
          return nameMatch && ageMatch;
        });
        this.isLoading = false;
      }, 500);
    }
  }
};
</script>

在上述代码中,我们增加了一个isLoading变量来表示过滤过程中的加载状态，并在applyFilters方法中模拟了一个异步操作（通过setTimeout），在操作开始时设置isLoading为true，操作结束时设置为false，在<v - table>组件上添加了:loading="isLoading"属性，当isLoading为true时，表格会显示加载状态，提高用户体验。

2 与排序功能协同工作

过滤功能和排序功能可以协同工作,为用户提供更强大的数据处理能力，用户可以先对表格数据进行排序，然后再进行过滤，或者先过滤再排序，在前面的代码基础上，我们可以进行如下改进：

<template>
  <div>
    <v - text - field v - model="nameFilter" label="搜索姓名"></v - text - field>
    <v - slider v - model="ageMin" :max="100" :min="0" label="最小年龄"></v - slider>
    <v - slider v - model="ageMax" :max="100" :min="0" label="最大年龄"></v - slider>
    <v - table>
      <thead>
        <v - table - column sortable>姓名</v - table - column>
        <v - table - column sortable>年龄</v - table - column>
      </thead>
      <tbody>
        <tr v - for="(item, index) in sortedAndFilteredUsers" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </v - table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        { name: '王五', age: 22 }
      ],
      nameFilter:

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：深入理解与应用Vuetify的Floating Action Button 下一篇：Vuetify表单示例，构建高效用户界面的指南
相关文章

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白