vue中使用filter筛选列表信息
完整代码参考地址列表筛选地址:https://blog.csdn.net/qq_39101581/article/details/107783302<template><div><!-- 列表信息 --><!-- 搜索框 --><el-input placeholder="请输入内容" v-model="wordKey" style="widt
·
列表筛选地址:https://blog.csdn.net/qq_39101581/article/details/107783302
正则表达式RegExp:http://www.vue5.com/es6/es6_regexp.html
完整代码如下:
包含
1.根据所判断得字段显示不同信息
2.字段搜索筛选
3.类型筛选
4.时间筛选
语法
array.filter(function(currentValue,index,arr), thisValue)
urrentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象
<template>
<div>
<!-- 列表信息 -->
<!-- 搜索框 -->
<el-input placeholder="请输入内容" v-model="wordKey" style="width: 30%">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<!-- 时间筛选 -->
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
>
</el-date-picker>
</div>
<!-- 按钮筛选 -->
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>只显示北京
<!-- 下拉框状态筛选 -->
<el-select v-model="filterType" placeholder="请选择">
<el-option
v-for="item in deviceTypeOptions"
:key="item.Value"
:label="item.Label"
:value="item.Value"
>
</el-option>
</el-select>
<!-- 表格 -->
<el-table
:data="findItems"
border
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column fixed prop="date" label="邮箱" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column label="状态" width="120">
<template slot-scope="scope">
<el-tag :type="statusColors[scope.row.statusss]">{{
statuses[scope.row.statusss]
}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300"
></el-table-column>
<el-table-column prop="times" label="时间" width="120"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<el-button
style="margin-top: 50px"
size="small"
:disabled="dis"
@click="jdks"
>查看选中信息</el-button
>
<!-- 详情信息---父组件得数据传给子组件 -->
<one-demo ref="onedemo" :form-data="formData" @one="two"></one-demo>
<!-- 子组件得数据传给父组件 -->
<div @click="two()" :class="{ active: showmode }">{{ ada }}</div>
</div>
</template>
<script>
import oneDemo from '../components/xiangQing/oneDemo.vue'
import Parameter from '@/utils/parameters'
export default {
name: 'home',
components: { oneDemo },
data () {
return {
tableData: [{
date: '2016-05-02',
name: '十大',
province: '上海',
statusss: 2,
address: '上海市普陀区金沙江路 1518 弄',
times: '2021-06-02'
}, {
date: '1512967795@163.com',
name: '骄傲和世界的',
province: '北京',
statusss: 2,
address: '上海市普陀区金沙江路 1517 弄',
times: '2021-07-02'
}, {
date: 'zsdasda',
name: 'd阿斯顿',
province: '北京',
statusss: 1,
address: '上海市普陀区金沙江路 1519 弄',
times: '2021-08-02'
}, {
date: '2016-05-03',
name: '法国人',
province: '北京',
statusss: 3,
address: '上海市普陀区金沙江路 1516 弄',
times: '2021-09-02'
}],
formData: {},
// 复选框查看选中信息按钮
dis: true,
multipleSelection: [],
showmode: true,
ada: '78979',
i: 1,
// 搜索框关键词
wordKey: '',
// 开关按钮
value: true,
// 时间筛选框
value1: '',
// 状态名字
statuses: ['未开始', '进行中', '搁置', '完成'],
// 标签颜色
statusColors: ['info', 'primary', 'warning', 'success'],
// 下拉筛选
deviceTypeOptions: Parameter.AT.DeviceType.Items,
// 绑定下拉框的值
filterType: ''
}
},
watch: {},
methods: {
handleClick (item) {
this.formData = item
this.$refs.onedemo.visible = true
},
handleSelectionChange (val) {
this.multipleSelection = val
if (this.multipleSelection.length > 0) {
this.dis = false
} else {
this.dis = true
}
},
jdks () {
console.log(this.multipleSelection)
},
two () {
this.i++
// 样式得引用或不引用
this.showmode = !this.showmode
if (this.i % 2 === 0) {
this.ada = 'sdasd'
// this.showmode = false
} else {
this.ada = '8564'
// this.showmode = true
}
}
},
computed: {
// 筛选
findItems: function () {
var _this = this
return _this.tableData.filter((item) => {
// 字段筛选
var reg = new RegExp(this.wordKey, 'i')
return !this.wordKey || reg.test(item.name)
}).filter((item) => {
// 时间筛选
return !this.value1 || (this.value1[0] <= new Date(item.times) && this.value1[1] >= new Date(item.times))
}).filter((item) => {
// 标签下拉筛选
return this.filterType === '' || item.statusss === this.filterType
})
}
}
}
</script>
<style>
.home {
margin-top: 10%;
font-size: 2.4em;
font-weight: bold;
}
.btn1 {
width: 120px;
height: 50px;
line-height: 50px;
border: 1px solid #b93e3e;
border: 0;
outline: none;
}
.active {
width: 120px;
height: 50px;
line-height: 50px;
background-color: aquamarine;
border: 1px solid #2a28ac;
border: 0;
outline: none;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)