预期效果
实现表单页面根据groupid 、type 、errortype进行数据过滤
实现
第一步,在页面中添加输入或者是下拉框,并且用相应的v-model进行绑定
<div style="display: flex;flex-direction: row;">
<el-input style="width: auto;height:32px" placeholder="输入故障设备组" v-model="groupid"></el-input>
<el-form-item>
<el-select v-model="type" placeholder="请选择故障类型">
<el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="errortype" placeholder="请选择故障原因">
<el-option v-for="(item, index) in errtypeOptions" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</div>
第二步,添加查询按钮 按钮绑定查询方法
<el-button type="primary" @click="search" style="margin-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是去除掉如果用户未输入内容的时候也进行过滤的情况的,通过多次过滤,我们可以任意选择筛选的情况