小贝子编程

使用vejs筛选表行



你好，我想在vue js中过滤和删除一个表。我这样做，但当我在文本框中的文本，我要搜索表的字母是空的。我想过滤行并显示与输入匹配的行。我希望我说得有道理。我不知道如何从这里开始。饼干和非常感谢任何帮助你的人!

<script>
import axios from 'axios'
export default {
name: 'Utenti',
data() {
return {
utenti: [],
modalTitle: '',
UtenteTessera: 0,
UtenteNome: '',
UtenteCognome: '',
UtenteEmail: '',
UtenteTelefono: '',
UtenteNomeFilter: '',
UtenteTesseraFilter: '',
utentiWithoutFilter: [],
}
},
methods: {
refreshData() {
axios.post('https://localhost:7285/Utenti/GetDati').then((response) => {
this.utenti = response.data.prova
this.utentiWithoutFilter = response.data.prova
})
},
FilterFn() {
const UtenteTesseraFilter = this.UtenteTesseraFilter
const UtenteNomeFilter = this.UtenteNomeFilter
this.utenti = this.utentiWithoutFilter.filter(function (el) {
return (
el.UtenteTessera.toString()
.toLowerCase()
.includes(UtenteTesseraFilter.toString().trim().toLowerCase()) &&
el.UtenteNome.toString()
.toLowerCase()
.includes(UtenteNomeFilter.toString().trim().toLowerCase())
)
})
},
sortResult(prop, asc) {
this.utenti = this.utentiWithoutFilter.sort(function (a, b) {
if (asc) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
} else {
return b[prop] > a[prop] ? 1 : b[prop] < a[prop] ? -1 : 0
}
})
},
},
}
</script>

<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
@keyup="FilterFn()"
/>
<button
type="button"
class="btn btn-light"
@click="sortResult('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="sortResult('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
@keyup="FilterFn()"
/>
<button
type="button"
class="btn btn-light"
@click="sortResult('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="sortResult('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utenti" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

处理"filter"one_answers";sort"这是两个不同的操作，但这是两个需要同时应用的操作(以便排序不会覆盖过滤结果，反之亦然)。此外，您根本没有使用Vue反应性。这是computed

的完美用例这个计算有3个输入:

  1. 未过滤且未排序的原始数组
  2. 有源滤波器
  3. 活动排序
<script>
import axios from 'axios'
export default {
name: 'Utenti',
data() {
return {
utenti: [],
modalTitle: '',
UtenteTessera: 0,
UtenteNome: '',
UtenteCognome: '',
UtenteEmail: '',
UtenteTelefono: '',
UtenteNomeFilter: '',
UtenteTesseraFilter: '',
// NEW
sort: {
prop: undefined,
asc: true
}
}
},
computed: {
utentiToDisplay() {
// filter first - this creates new array
const result = this.utenti.filter(el =>       
el.UtenteTessera.toString()
.toLowerCase()
.includes(
this.UtenteTesseraFilter.toString().trim().toLowerCase()
) 
&&
el.UtenteNome.toString()
.toLowerCase()
.includes(
this.UtenteNomeFilter.toString().trim().toLowerCase()
)
)
// now sort the results in-place if needed
if(this.sort.prop) {
result.sort((a, b) => {
if (this.sort.asc) {
return a[prop] > b[prop] ? 1 : a[prop] < b[prop] ? -1 : 0
} else {
return b[prop] > a[prop] ? 1 : b[prop] < a[prop] ? -1 : 0
}
})
}

return result      
}
},
methods: {
refreshData() {
axios.post('https://localhost:7285/Utenti/GetDati').then((response) => { this.utenti = response.data.prova })
},
setSort(prop, asc) {
this.sort.prop = prop
this.sort.asc = asc
}
},
}
</script>

<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utentiToDisplay" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

我解决了。

<script>
import axios from "axios"
export default {
name: "Utenti",

data() {
return {
utenti: [],
modalTitle: "",
UtenteTessera: 0,
UtenteNome: "",
UtenteCognome: "",
UtenteEmail: "",
UtenteTelefono: "",               
UtenteNomeFilter: "",
UtenteTesseraFilter: "",
sortKey: 'nome',
reverse:false
}
},

computed: {
utentiToDisplay() {
return this.utenti.filter(this.filterByName)
.filter(this.filterByTessera)
.sort(this.orderBy);
}
},
methods: {
filterByName: function (utente) {
if (this.UtenteNomeFilter.length === 0) {
return true;
}
return (utente.nome.toLowerCase().indexOf(this.UtenteNomeFilter.toLowerCase()) > -1);
},
filterByTessera: function (utente) {
if (this.UtenteTesseraFilter.length === 0) {
return true;
}
return (utente.tessera.toLowerCase().indexOf(this.UtenteTesseraFilter.toLowerCase()) > -1);
},
orderBy: function (utenteA, utenteB) {
let condition = (utenteA[this.sortKey] > utenteB[this.sortKey]);
if (this.reverse) {
return !condition;
}
else {
return condition;
}
}
}

和模板

<div>
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteTesseraFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteTessera', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteTessera', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
Tessera
</th>
<th>
<div class="d-flex flex-row">
<input
v-model="UtenteNomeFilter"
class="form-control m-2"
placeholder="Filter"
/>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteNome', true)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-down-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0z"
/>
</svg>
</button>
<button
type="button"
class="btn btn-light"
@click="setSort('UtenteNome', false)"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-up-square-fill"
viewBox="0 0 16 16"
>
<path
d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"
/>
</svg>
</button>
</div>
UtenteNome
</th>
<th>Options</th>
</tr>
</thead>
</table>
<table class="table table-striped" style="z-index: 1">
<thead>
<tr>
<th>Tessera</th>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Telefono</th>
</tr>
</thead>
<tbody>
<!--<tr v-for="info in info" :key="index">-->
<tr v-for="utente in utentiToDisplay" :key="title">
<td>{{ utente.tessera }}</td>
<td>{{ utente.nome }}</td>
<td>{{ utente.cognome }}</td>
<td>{{ utente.email }}</td>
<td>{{ utente.telefono }}</td>
</tr>
</tbody>
</table>
</div>
</template>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium