此问题与以下错误报告有关:https://github.com/vuetifyjs/vuetify/issues/3468
我有一个VDataTable
,其中包含可排序的列标题和各种输入元素(VTextField
和VSelect
)。
编辑在特定列上激活排序的输入元素会编辑模型。这会导致表格在键入(VTextField
)或选择其他值(在VSelect
中)时重新排序。
理想情况下,只有在单击相应的列标题后,表才应重新排序。换句话说,该表不应自动排序,而只能手动排序。
This Pen说明了这个问题。在使用VSelect
答案 0 :(得分:0)
我想出了一种解决方法。请参见以下小提琴: https://jsfiddle.net/Loh5kyzt/
要演奏小提琴,请单击复选框。然后在“ Chkd”列上排序。然后选中当前未选中的行输入框。在您再次对列进行排序之前,行不会再次移动。
一开始我的举止非常令人讨厌;我以为我写了一个错误。我正在交叉张贴关于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;
});
}
},
});
HTML代码
<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>
CSS代码
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
}