为了让过滤行永远在表格的第一行,可以将该行作为一个单独的空白行固定在表格的顶部,而不依赖于实际的 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"
处,固定过滤行的输入框,保证其在表格的第一行,且不会随数据变化而移走。
这样,过滤行将永远保持在表格的顶部,并且可以动态根据输入框的值过滤数据。