el-table第一行过滤功能

为了让过滤行永远在表格的第一行，可以将该行作为一个单独的空白行固定在表格的顶部，而不依赖于实际的 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>

关键点说明：

1. 过滤行固定：通过在 filteredData 中手动创建 filterRow，将其始终放在数据的第一行，并设置 isFilterRow 标志，用于在模板中判断是否为过滤行。
2. 数据过滤：在 filteredData 中，实际数据经过过滤后依次排列在过滤行下方。
3. 样式和模板处理：在 v-if="scope.row.isFilterRow" 处，固定过滤行的输入框，保证其在表格的第一行，且不会随数据变化而移走。

这样，过滤行将永远保持在表格的顶部，并且可以动态根据输入框的值过滤数据。