【Vue】如何用下拉选择器过滤表格？

想直接用下拉选择器实现表格的筛选，不是使用elementUI的表头筛选，请问该怎么实现？？

【Vue】如何用下拉选择器过滤表格？

<template>
<div class="child-page-toolbar">
<div class="line"></div>
<span slot="title">状态</span>
<el-select v-model="selectState" placeholder="请选择工单状态" @change="StateChange">
<el-option
v-for="item in state"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span slot="title">分类</span>
<el-select v-model="selectSort" placeholder="请选择工单类别" @change="SortChange">
<el-option
v-for="item in sort"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker
v-model="selectDate"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions" @change="dateChange">
</el-date-picker>
<el-table :data="tableData"
style="width: 100%"
:default-sort = "{prop: 'submitTime', order: 'ascending'}">
<el-table-column
prop="orderNum"
label="工单号"
sortable
width="180">
</el-table-column>
<el-table-column
prop="orderSort"
label="分类"
width="180">
</el-table-column>
<el-table-column
prop="orderTitle"
label="标题">
</el-table-column>
<el-table-column
prop="orderDescribe"
label="描述"
width="180">
</el-table-column>
<el-table-column
prop="orderState"
label="状态"
width="180">
</el-table-column>
<el-table-column
prop="submitTime"
label="提交时间"
sortable>
</el-table-column>
<el-table-column
prop="endTime"
label="截止时间"
sortable
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button @click="handleDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
state: [{
value: '0',
label: '全部工单'
}, {
value: '1',
label: '未处理'
}, {
value: '2',
label: '处理中'
}, {
value: '3',
label: '已处理'
}, {
value: '4',
label: '已结单'
}],
sort: [{
value: '0',
label: '全部工单'
}, {
value: '1',
label: '文案类'
}, {
value: '2',
label: '设计类'
}, {
value: '3',
label: '开发类'
}, {
value: '4',
label: '采购类'
}, {
value: '5',
label: '其他类'
}],
selectState: '',
selectSort:'',
//日期选择器
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
selectDate: '',
//表格数据
tableData: [{
orderNum: '1',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.10 02:33',
endTime:'2017.02.10 02:33'
}, {
orderNum: '2',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.11 02:33',
endTime:'2017.02.09 02:33'
}, {
orderNum: '3',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.12 02:33',
endTime:'2017.02.08 02:33'
}, {
orderNum: '4',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.09 02:33',
endTime:'2017.02.07 02:33'
}, {
orderNum: '5',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.08 02:33',
endTime:'2017.02.06 02:33'
}, {
orderNum: '6',
orderSort: '开发',
orderTitle: 'BUG测试',
orderDescribe:'BUG测试描述',
orderState:'处理中',
submitTime:'2017.01.15 02:33',
endTime:'2017.02.05 02:33'
}]
}
},
filter:{
},
methods: {
StateChange(value) {
console.log(value);
if(value === 2){
}
},
SortChange(value){
console.log(value);
},
dateChange(value){
console.log(value);
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleClick(row) {
console.log(row);
},
handleDetail(index,row){
location.href = "/personal/detail"
},
handleEdit(index,row){
location.href = "/createOrder/new"
},
handleDelete(index,row){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>

回答

vue的数据都是绑定的，数据变了展示的内容就跟着变了，下拉菜单有一个change事件，可以根据选中的值去改变下面表格中绑定的数据内容，数据一旦变化，内容会自动更新，就是这思路，若不懂，可评论告诉我，我给你代码实现一下，现在不写是因为那么多内容，难写呀^_^ ^_^

1.筛选条件的change事件对应的事件只要写一个方法就可以了，如changeSelect，因为过滤不止要兼顾当前选择的过滤条件，还要兼顾其他选择的选项，如现在选了分类，但之前选过的状态也得保留。
2.一般如果数据量比较大的话，筛选条件是要作为参数传给后台，后台过滤之后返回给前台渲染即可，毕竟服务器的处理速度比浏览器的处理速度快的不止一丢丢
3.假如需要前台渲染，拿到所有数据以后，在changeSelect方法中，首先获取所有过滤项的值，也就是v-model所绑定的值，举个例子，过滤了state为处理中且分类是开发的话，那就在表格数据渲染的时候(假如从后台拿到的数据数组为res)，判断res[i].state==this.selectState&&res[i].sort==this.selectSort的话将数据放到表格数据中进行渲染，否则不渲染。
建议过滤项让后台提供筛参数，使用第二种方式。

@loje 你数据是来自后端api吧，问后端传什么参数就可以了，change后用axios发ajax请求啊

以上是 【Vue】如何用下拉选择器过滤表格？ 的全部内容， 来源链接： utcz.com/a/77016.html

回到顶部