Vue.js 在输入时使用排序活动排序表编辑DataTable中的值

此问题与以下错误报告有关：

我有一个

VDataTable

，带有可排序的列标题和各种输入元素（

VTextField

和

VSelect

）

在特定列上排序处于活动状态时编辑输入元素将编辑模型。这会导致表格在键入（在

VTextField

中）或选择其他值（在

VSelect

中）时重新排序

理想情况下，只有在单击相应的列标题后，表才应该重新排序。换句话说，表不应自动排序，而应仅手动排序

---

这说明了这个问题。使用

VSelect

测试行为时，请确保选择了按国家排序。我想出了一个解决此行为的方法。看下面的小提琴：

要练习小提琴，请单击其中的复选框。然后在“Chkd”列上排序。然后选中当前未选中的行输入框。在对列再次排序之前，行不会再次移动

这种行为一开始让我很恼火；我以为我写了一个bug。我将我的小提琴交叉张贴到Vue中报告的问题上

JS代码

Vue.component('data-row', {
  props: ['row', 'index', 'currentSortCol'],
  template: `
    <tr>
      <td><input type="checkbox" @click="$emit('checkee', $event.target.checked, index)"/></td>
      <td>{{ row.a }}</td>
      <td>{{ row.b }}</td>
      <td>{{ row.c }}</td>
      <td>{{ row.d }}</td>
      <td>{{ row.e }}</td>
      <td>{{ row.chkd }}</td>
    </tr>
  `,
});

Vue.component('head-row', {
  props: [],
  template: `
    <thead>
      <th>Delete</th>
      <th @click="$emit('sort', 'a')">Col A</th>
      <th @click="$emit('sort', 'b')">Col B</th>
      <th @click="$emit('sort', 'c')">Col C</th>
      <th @click="$emit('sort', 'd')">Col D</th>
      <th @click="$emit('sort', 'e')">Col E</th>
      <th @click="$emit('sort', 'chkd')">Chkd</th>
    </thead>
  `
})

new Vue({
  el: "#app",
  data: {
    coldata: [
      { "a": "Foo", "b": 2, "c": 3, "d": 4, "e": 5, "chkd": false},
      { "a": "Bar", "b": 3, "c": 4, "d": 5, "e": 1, "chkd": false },
      { "a": "Baz", "b": 4, "c": 5, "d": 1, "e": 2, "chkd": false },
      { "a": "Daz", "b": 5, "c": 1, "d": 2, "e": 3, "chkd": false }
    ],
    currentSortCol: "a",
    currentSortDir: 'asc',
    currentSortDict: {"a": "desc", "b": "desc", "c": "desc", "d": "desc", "e": "desc"},
    preventSort: false
  },
  methods: {
    sort: function(s) {
      if (this.preventSort) {
        this.preventSort = false;
      }
      //if (s === this.currentSortCol) {
        this.currentSortDict[s] = this.currentSortDict[s]==='asc'?'desc':'asc';
      //}
      this.currentSortCol = s;
      this.currentSortDir = this.currentSortDict[s]
    },
    checkee: function(cs, i) {
        //console.log("len args is " + arguments.length)
        if (this.currentSortCol == "chkd") {
          this.preventSort = true
        }
        else {
          this.preventSort = false
        }
        this.coldata[i].chkd = cs;
    }
  },
  computed: {
    sortedRows: function() {
      if (this.preventSort) {
        return this.coldata;
      }
      return this.coldata.sort((a,b) => {
        let modifier = 1;
        if(this.currentSortDir === "desc") modifier = -1;
        if(a[this.currentSortCol] < b[this.currentSortCol]) return -1 * modifier;
        if(a[this.currentSortCol] > b[this.currentSortCol]) return 1 * modifier;
        return 0;
      });
    }  
  },
});

---

你曾经解决过这个问题吗？还是这仍然是一个悬而未决的问题？@SvenHakvoort不幸的是，它仍然悬而未决

<div>
<h3>
foo
</h3>
</div>
<div id="app">
  <h2>Data:</h2>
  <table>
  <head-row @sort="sort"></head-row>
  <tbody>
    <tr is="data-row" v-for="(row, index) in sortedRows"  v-bind:row="row" v-bind:key="row.a" v-bind:index="index" @checkee="checkee">
    </tr>
  </tbody>
  </table>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

table {
  table-layout: fixed;
  width: 420px;
}

td, th {
  width: 60px;
  text-align: center;
  white-space: nowrap
}