多个输入框实现串联筛选

需求描述：调接口获取数据，前端通过条件进行模糊筛选，效果图如下：

<template>
<div>
    <el-table border class="search-table" :data="tableData2">
        <el-table-column align="center" fixed type="selection" width="50" />
        <el-table-column fixed label="序号" type="index">
            <template #header>
                <div class="th-head">序号</div>
            </template>
            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column fixed label="物料名称" prop="name" width="150">
            <template #header>
                <div class="th-head">物料名称</div>
                <el-input v-model="query.name" placeholder="输入物料名称查询" />
            </template>
        </el-table-column>
        <el-table-column label="规格说明" prop="desc" width="150">
            <template #header>
                <div class="th-head">规格说明</div>
                <el-input v-model="query.desc" placeholder="输入规格说明查询" />
            </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" width="120">
            <template #header>
                <div class="th-head">单位</div>
                <el-input v-model="query.unit" placeholder="输入单位查询" />
            </template>
        </el-table-column>
        <el-table-column align="right" header-align="left" label="不含税单价" prop="price" width="120">
            <template #header>
                <div class="th-head">不含税单价</div>
                <el-input v-model="query.price" placeholder="输入不含税单价查询" />
            </template>
        </el-table-column>
        <el-table-column align="right" header-align="left" label="含税单价" prop="pricevat" width="120">
            <template #header>
                <div class="th-head">含税单价</div>
                <el-input v-model="query.pricevat" placeholder="输入含税单价查询" />
            </template>
        </el-table-column>
        <el-table-column label="订单量" prop="quantity" width="300">
            <template #header>
                <div class="th-head">订单量</div>
                <el-input v-model="query.quantity" placeholder="输入订单量查询" />
            </template>
        </el-table-column>
        <el-table-column label="到货量" prop="zip" width="300">
            <template #header>
                <div class="th-head">到货量</div>
                <el-input v-model="query.zip" placeholder="输入到货量查询" />
            </template>
        </el-table-column>
        <el-table-column label="收获单位" prop="city" width="300">
            <template #header>
                <div class="th-head">收获单位</div>
                <el-input v-model="query.city" placeholder="输入收获单位查询" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template #header>
                <div class="th-head">操作</div>
            </template>
            <template #default="{ row }">
                <el-button size="small" type="text" @click="handleClick(row)">
                    查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                    date: '2016-05-02',
                    name: '张小虎',
                    province: '上海',
                    city: '地方接电话',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: '地方共和国股份回购',
                    desc: '哈哈哈哈',
                    price: '125',
                    pricevat: '230'
                },
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    province: '上海',
                    city: '是经典款待付款',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: '大结局几篇',
                    price: '125',
                    pricevat: '120,344,000.27',
                    desc: '信息已想哈',
                },
                {
                    date: '2016-05-01',
                    name: '李小虎',
                    province: '上海',
                    city: '近段时间',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: '的会计考试',
                    price: '1,001,230,000.25',
                    pricevat: '120',
                    desc: '黑乎乎啥啥啥',
                },
                {
                    date: '2016-05-03',
                    name: '陈大虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: '豆腐鱼页面快乐',
                    price: '10,023,000.25',
                    pricevat: '12',
                    desc: '就是调平看一眼2',
                },
                {
                    date: '2016-05-03',
                    name: '陈大王',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: '豆腐鱼页面快乐3',
                    price: '20.25',
                    pricevat: '12,008,900.27',
                    desc: '就是调平看三眼',
                },
                {
                    date: '2016-05-03',
                    name: '陈大事',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: '豆腐鱼页面快乐3',
                    price: '10',
                    pricevat: '12,008,900.27',
                    desc: '就是调平看二眼',
                },
            ],
            query: {
                name: '',
                desc: '',
                unit: '',
                price: '',
                pricevat: '',
                quantity: '',
                arrived: '',
                arrivedcompany: '',
            },
        }
    },
    computed: {
        //俩input输入值筛选
        tableData2() {
            return this.tableData.filter(
                //name，desc是要筛选的两个属性，this.query.name,this.query.dec是两个input框里v-model绑定的输入的两个值
                item =>
                item.name.includes(this.query.name) && item.desc.includes(this.query.desc) &&
                item.price.includes(this.query.price) && item.pricevat.includes(this.query.pricevat)

            )
        },
    },
}
</script>

<style lang="less" scoped>
.el-table th.el-table__cell.el-table__cell,
.el-table th.el-table__cell .cell {
    background: #cccd;
    color: #666;
}

.search-table {
    th.el-table__cell {
        vertical-align: top;
        padding-top: 0;
        padding-bottom: 0;
    }

    .th-head {
        background: #cccd;
        border-bottom: 1px solid #e6ecf6;
        padding: 8px 10px;
        // height: 40px;
        box-sizing: border-box;
    }

    th.el-table__cell>.cell.cell {
        font-weight: 500;
        color: #282828;
        padding-left: 0;
        padding-right: 0;
    }

    th.el-table-column--selection .cell {
        background: #cccd;
        border-bottom: 1px solid #e6ecf6;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
        height: 40px;
        box-sizing: border-box;
    }

    tr td.el-table__cell:first-child .cell .el-checkbox {
        padding-left: 4px;
    }

    // 输入框
    th .el-input__inner {
        border-color: transparent;
        padding-left: 10px;
    }

    th .el-input__inner:focus {
        border-color: #1890ff;
    }
}
</style>