Vuetify - 在表中跳转到找到的行的搜索功能

Question

我有 2 个没有分页的 Vuetify 数据表。第二个的每一行在第一个中都有一个父级。如果我单击第二个条目中的一个，我想搜索父项并跳转到该行。我现在发现的只是过滤，但我只想把那一行放在我的桌子上。 这样的事情可能吗？

Answer 1

如果没有代码，我们真的无法为您提供帮助，即使我已经看到您不能，如果您可以修改代码的某些部分（例如变量和数据）应该会很酷...

不过，我会尽力解释

您要做的是根据给定的 id（或其他数据）对绑定在表上的数据数组重新排序以识别它。

我为您的需求做了一个类似的例子，但我再说一遍，我真的不能穷尽：

父组件：

<template>
  <div id="app">
    <listone :list="listOne" :toggled="toggledParent"></listone>

    <listtwo :list="listTwo" v-model="toggledParent"></listtwo>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    toggledParent: 0,
    listOne: [
      {
        id: 1,
        title: "parent1",
      },
      {
        id: 2,
        title: "parent2",
      },
      {
        id: 3,
        title: "parent3",
      },
    ],
    listTwo: [
      {
        title: "title1",
        parent: 3,
      },
      {
        title: "title2",
        parent: 1,
      },
      {
        title: "title3",
        parent: 2,
      },
    ],
  }),
  components: {
    listone: () => import("@/components/listone"),
    listtwo: () => import("@/components/listtwo"),
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
</style>

ListOne 组件：

<template>
  <div class="list">
    <a v-for="item in treatedList" :key="item.title">
      {{ item.title }}
    </a>
  </div>
</template>

<script>
export default {
  name: "listone",
  props: {
    list: Array,
    toggled: Number,
  },
  computed: {
    treatedList: function () {
      let tmp = this.list;
      let $this = this
      return tmp.sort(function (a, b) {
        return a.id === $this.toggled ? -1 : b.id === $this.toggled ? 1 : 0;
      });
    },
  },
};
</script>

<style>
.list {
  display: flex;
  flex-flow: column nowrap;
}

.list > a {
  border: 1px solid red;
}
</style>

ListTwo 组件：

<template>
  <div class="list">
      <a 
        v-for="item in list" 
        :key="item.title" 
        @click="$emit('input', item.parent)">
      {{ item.title }}
    </a>
  </div>
</template>

<script>
export default {
  name: "listtwo",
  props: {
    list: Array,
    toggledParent: Number
  },
};
</script>

<style scoped>
.list {
  display: flex;
  flex-flow: column nowrap;
}

.list > a {
  border: 1px solid red;
}
</style>

试试看，告诉我它对你有什么帮助

codesandbox.io 上的演示：https://codesandbox.io/s/mutable-thunder-zo8vn?fontsize=14&hidenavigation=1&theme=dark

Answer 2

所以在不知道您的数据是什么样子的情况下，我将使用没有元数据的标准对象数组。

您可以做的是使用计算属性内部的排序功能，如下所示，这将在您每次匹配或过滤列表时重新组织您的列表。

（注意：这每次都会重新排列您的整个列表）

这是一个非常基本的例子：

new Vue({
  el: "#app",
  data: {
   search: 'Bananas',
   tableData: [
   {
    item: "Cherries",
    price: 3.99,
    type: "Fruit"
   },
   {
    item: "Chicken",
    price: 6.99,
    type: "Meat"
   },
   {
    item: "Bananas",
    price: 1.99,
    type: "Fruit"
   },
   {
    item: "Cola",
    price: 0.99,
    type: "Drink"
   },
   {
    item: "Coffee",
    price: 2.99,
    type: "Drink"
   },
   ]
  },
  computed: {
    getTableData: function() {
      return this.tableData.sort((x,y) => { return x.item == this.search ? -1 : y.item == this.search ? 1 : 0; });
    }
  }
})

table {
  background: #ccc;
  padding: 20px;
  width:50%;
}
table tr {
  background: #f1f1f1;
}
table tr td {
  padding: 10px;
}
.firstRow {
  background: green;
  color:white;
}
.searchBar {
  padding:20px;
  width: 40%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="searchBar">
Search <input type="text" v-model="search">
</div>
  <table>
  
  <tr class="firstRow"><td>Item</td> <td>Price</td> <td>Type</td></tr>
    <tr v-for="(product, index) in getTableData" :key="index">
      <td>{{product.item}}</td>
      <td>{{product.type}}</td>
      <td>{{product.price}}</td>
    </tr>
  </table>
</div>