vue2.0和quasarUI里面q-markup-table和输入框封装表格过滤组件

《独白》

已于 2024-01-12 09:51:53 修改

阅读量422

点赞数 6

文章标签：前端 javascript html

于 2024-01-11 15:37:20 首次发布

本文链接：https://blog.csdn.net/qq_45149139/article/details/135531183

版权

文章描述了一个Vue组件中如何使用计算属性filteredTableData，通过特定条件（包括名称、热量和脂肪含量）对数组tableData进行过滤，实现实时搜索和显示相关数据。

摘要由CSDN通过智能技术生成

特定的条件筛选出数组中的项

完整代码

<template>
  <div class="q-pa-md">
    <q-markup-table>
      <thead>
        <tr>
          <th class="text-center" style="width: 150px; text-align: center">
            代理
            <q-input outlined v-model="filterText" />
          </th>
          <th class="text-center">
            名称
            <q-input outlined v-model="name" />
          </th>
          <th class="text-center">
            周期
            <q-input outlined v-model="period" />
          </th>
          <th class="text-center">
            单位
            <q-input outlined v-model="unit" />
          </th>
          <th class="text-center">
            类型
            <q-input outlined v-model="type" />
          </th>
          <th class="text-center">
            状态
            <q-input outlined v-model="text" />
          </th>
          <th class="text-center">
            有效标志
            <q-input outlined v-model="text" />
          </th>
          <th class="text-center">
            更新人
            <q-input outlined v-model="text" />
          </th>
          <th class="text-center">
            更新时间
            <q-input outlined v-model="text" />
          </th>
          <th class="text-center">
            备注
            <q-input outlined v-model="text" />
          </th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(n, i) in filteredTableData" :key="i">
          <td class="text-center">
            {{ n.name }}
          </td>
          <td class="text-center">
            {{ n.calories }}
          </td>
          <td class="text-center">
            {{ n.fat }}
          </td>
          <td class="text-center">
            {{ n.carbs }}
          </td>
          <td class="text-center">
            {{ n.protein }}
          </td>
          <td class="text-center">
            {{ n.sodium }}
          </td>
          <td class="text-center">
            <q-checkbox disable v-model="n.ironss" />
          </td>
          <td class="text-center">
            {{ n.calcium }}
          </td>
          <td class="text-center">
            {{ n.iron }}
          </td>
          <td class="text-center">
            {{ n.irons }}
          </td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

<script>
export default {
  name: "GhDialog",
  data() {
    return {
      filterText: "",
      text: "",
      period: "",
      type: "",
      name: "",
      unit: "",
      val: [],
      tableData: [
        {
          name: "Frozen Yogurt",
          calories: "11",
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: "14%",
          iron: "1%",
          irons: "1%",
          ironss: true,
        },
        {
          name: "Ice cream sandwich",
          calories: "237",
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: "8%",
          iron: "1%",
          irons: "1%",
          ironss: false,
        },
      ],
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter((item) => {
        return (
          item.name.toLowerCase().includes(this.filterText.toLowerCase()) &&
          item.calories.toLowerCase().includes(this.name.toLowerCase())&&
          item.fat.toString().toLowerCase().includes(this.period.toLowerCase())
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .q-field__control {
  height: 32px;
}
table {
  border-collapse: collapse;
}
table thead tr th {
  border-bottom: 1px solid #000000;
}

table th,
table td {
  border: 1px solid #d9d9d9;
}
</style>

它用于过滤tableData数组。具体来说，它根据特定的条件筛选出数组中的项。下面是对代码的解释：

filteredTableData() {: 定义一个名为filteredTableData的函数
return this.tableData.filter((item) => {: 使用数组的filter方法来过滤tableData数组。对于数组中的每一项（这里称为item），都会执行括号中的函数，并根据该函数的返回值决定是否保留该项。
return (: 开始定义返回的过滤函数。
em.name.toLowerCase().includes(this.filterText.toLowerCase()) &&: 检查当前项的name属性（转换为小写后）是否包含this.filterText（也转换为小写后）。这是第一个过滤条件。
item.calories.toLowerCase().includes(this.name.toLowerCase()) &&: 检查当前项的calories属性（转换为小写后）是否包含this.name（也转换为小写后）。这是第二个过滤条件。
item.fat.toString().toLowerCase().includes(this.period.toLowerCase()): 检查当前项的fat属性（先转换为字符串，再转换为小写后）是否包含this.period（也转换为小写后）。这是第三个过滤条件。
);: 结束返回的过滤函数。
});: 结束数组的filter方法。
},: 结束filteredTableData函数的定义。