时间戳

首页 > 解决方案 > 如何根据传递给该组件的属性更改组件的数据

javascript - 如何根据传递给该组件的属性更改组件的数据

问题描述

我正在尝试在 vue 中创建一个表组件，它将根据传递给该组件的属性更改顺序：

sort: {
      type: String,
      default: "desc",
      description: "Table data order"
    }

如果我通过这里 asc 我希望行以相反的顺序放置： desc - [1,2,3] asc - [3,2,1] 所以我所做的只是添加了一个改变顺序的函数状态数据中的数组：（这就是我获取行的所有数据的地方）

data: {
      type: Array,
      default: () => [],
      description: "Table data"
    }

它实际上是有效的，但我无法摆脱我做错事的感觉，我想看看你的想法和解决方案。在此先感谢，整个组件代码如下。

<template>
  <table>
    <thead>
      <tr>
        <slot name="columns" :columns="columns">
          <th v-for="column in columns" :key="column">{{ column }}</th>
        </slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <slot :row="item" :index="index">
          <td
            v-for="(column, index) in colsWithValue(item)"
            :key="index"
          >{{ itemValue(item, column) }}</td>
        </slot>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: "base-table",
  props: {
    columns: {
      type: Array,
      default: () => [],
      description: "Table columns"
    },
    data: {
      type: Array,
      default: () => [],
      description: "Table data"
    },
    sort: {
      type: String,
      default: "desc",
      description: "Table data order"
    }
  },
  computed: {
    tableClass() {
      return this.type && `table-${this.type}`;
    },
    colsWithValue() {
      return row => {
        return this.columns.filter(column => this.hasValue(row, column));
      };
    }
  },
   methods: {
    hasValue(item, column) {
      return item[column.toLowerCase()] !== "undefined";
    },
    itemValue(item, column) {
      return item[column.toLowerCase()];
    },
    sortDataAsc(){
      if(this.sort === "asc"){
      this.data = this.data.reverse();
    }
    }
  },
  created(){
    this.sortDataAsc();
  }
};
</script>

标签： javascriptarraysvuejs2frontendvue-component

解决方案

如果您不确定这是否是最佳解决方案，您可以在链接https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted查看有关此“显示过滤/排序结果”的文档-结果

最好的例子是：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

推荐阅读