上海在线网站,做艺术网站素材,电商网站推广渠道,建筑施工企业预期效果
实现表单页面根据groupid 、type 、errortype进行数据过滤
实现
第一步#xff0c;在页面中添加输入或者是下拉框#xff0c;并且用相应的v-model进行绑定 div styledisplay: flex;flex-direction: row;el-input stylewidth: auto…预期效果
实现表单页面根据groupid 、type 、errortype进行数据过滤
实现
第一步在页面中添加输入或者是下拉框并且用相应的v-model进行绑定 div styledisplay: flex;flex-direction: row;el-input stylewidth: auto;height:32px placeholder输入故障设备组 v-modelgroupid/el-inputel-form-itemel-select v-modeltype placeholder请选择故障类型el-option v-for(item, index) in typeOptions :keyindex :labelitem.label:valueitem.value/el-option/el-select/el-form-itemel-form-itemel-select v-modelerrortype placeholder请选择故障原因el-option v-for(item, index) in errtypeOptions :keyindex :labelitem.label:valueitem.value/el-option/el-select/el-form-item/div第二步添加查询按钮 按钮绑定查询方法 el-button typeprimary clicksearch stylemargin-left: 5px查询数据/el-button第三步
此时已经很多报错了赶紧定义所需的数据和方法
定义v-model绑定的数据存储查询的东西
const groupid ref()
const type ref()
const errortype ref()定义下拉框内容
let typeOptions ref([{label: 一般故障,value: 一般故障},{label: 紧急故障,value: 紧急故障},{label: 特大故障,value: 特大故障}
]);
let errtypeOptions ref([{label: 温度,value: 温度},{label: 电流,value: 电流},{label: 电压,value: 电压}
]);第三步
定义搜索方法
//查询数据
const search () {if (groupid.value ! ) {tableData.value tableData.value.filter(v v.groupid (groupid.value))console.log(1);}if (type.value ! ) {tableData.value tableData.value.filter(v v.type.includes(type.value))console.log(2);}if (errortype.value ! ) {tableData.value tableData.value.filter(v v.errortype.includes(errortype.value))console.log(3);}}
这里的if是去除掉如果用户未输入内容的时候也进行过滤的情况的通过多次过滤我们可以任意选择筛选的情况
