为了让过滤行永远在表格的第一行，可以将该行作为一个单独的空白行固定在表格的顶部，而不依赖于实际的 lsData 数据。这个空白行将始终保留在第一行，且不会被表格中的数据影响。
可以通过在 computed 属性中将过滤行独立处理，保证它总是出现在第一行，且下面显示的是 lsData 的过滤结果。以下是实现方案：
完整代码：
<template><el-table :data="filteredData" ><!-- 表头列：设备类型,设备名称,报警类型等 --><el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width"><template slot-scope="scope"><!-- 永远固定的过滤输入框行 --><div v-if="scope.row.isFilterRow"><input v-model="filters[column.prop]" size="small" :placeholder="`过滤${column.label}`" @input="filterData" class="scope_input" /></div><!-- 显示数据行 --><div v-else>{{ scope.row[column.prop] }}</div></template></el-table-column></el-table>
</template><script>
export default {data() {return {filters: {deviceType: '',deviceName: '',alarmType: '',alarmContent: '',alarmLevel: '',alarmSource: '',windowStatus: '',alarmTime: '',recoveryTime: '',intelligentDiagnosis: '',maintenanceSuggestion: '',confirm: '',processing: '',analysis: ''},lsData: [// 示例数据{ deviceType: 'A', deviceName: '设备1', alarmType: '类型1', alarmContent: '内容1', alarmLevel: '一级', alarmSource: '来源1', windowStatus: '开启', alarmTime: '2024-09-05', recoveryTime: '2024-09-06', intelligentDiagnosis: '诊断1', maintenanceSuggestion: '建议1', confirm: '是', processing: '处理1', analysis: '分析1' },{ deviceType: 'B', deviceName: '设备2', alarmType: '类型2', alarmContent: '内容2', alarmLevel: '二级', alarmSource: '来源2', windowStatus: '关闭', alarmTime: '2024-09-05', recoveryTime: '2024-09-06', intelligentDiagnosis: '诊断2', maintenanceSuggestion: '建议2', confirm: '否', processing: '处理2', analysis: '分析2' },// 更多数据...],columns: [{ prop: 'deviceType', label: '设备类型', width: '120' },{ prop: 'deviceName', label: '设备名称', width: '120' },{ prop: 'alarmType', label: '报警类型', width: '120' },{ prop: 'alarmContent', label: '报警内容', width: '150' },{ prop: 'alarmLevel', label: '报警级别', width: '100' },{ prop: 'alarmSource', label: '报警来源', width: '100' },{ prop: 'windowStatus', label: '天窗状态', width: '100' },{ prop: 'alarmTime', label: '报警时间', width: '150' },{ prop: 'recoveryTime', label: '恢复时间', width: '150' },{ prop: 'intelligentDiagnosis', label: '智能诊断', width: '120' },{ prop: 'maintenanceSuggestion', label: '维修建议', width: '120' },{ prop: 'confirm', label: '确认', width: '80' },{ prop: 'processing', label: '处理', width: '100' },{ prop: 'analysis', label: '分析', width: '100' }]};},computed: {filteredData() {// 将过滤行放在第一行const filterRow = { isFilterRow: true };// 根据过滤条件返回过滤后的数据const filteredRows = this.lsData.filter(row => {return Object.keys(this.filters).every(key => {return String(row[key]).toLowerCase().includes(String(this.filters[key]).toLowerCase()) || this.filters[key] === '';});});// 返回包含过滤行和数据的数组return [filterRow, ...filteredRows];}},methods: {filterData() {// 触发重新过滤}}
};
</script><style scoped>
.scope_input {width: 100%;
}
</style>
关键点说明：
- 过滤行固定：通过在
filteredData中手动创建filterRow，将其始终放在数据的第一行，并设置isFilterRow标志，用于在模板中判断是否为过滤行。 - 数据过滤：在
filteredData中，实际数据经过过滤后依次排列在过滤行下方。 - 样式和模板处理：在
v-if="scope.row.isFilterRow"处，固定过滤行的输入框，保证其在表格的第一行，且不会随数据变化而移走。
这样，过滤行将永远保持在表格的顶部，并且可以动态根据输入框的值过滤数据。
