el-form根据查询条件的换行来动态展开收起

在El-form组件中，如果你想要基于用户的查询条件实现表格内容的动态展开放缩，通常会配合Vue的数据驱动和条件渲染技术。当你获取到用户输入的查询条件（比如搜索关键词），你可以设置一个数组或者对象来存储需要显示的信息，然后在模板中通过v-if或v-show指令来控制每一行是否展示。

例如：

<template>
  <el-form :model="searchParams">
    <el-input v-model="searchParams.keyword" placeholder="请输入查询条件"></el-input>
    <el-button @click="handleSearch">搜索</el-button>
    <el-collapse v-for="(item, index) in filteredData" :key="index" :open="shouldShow(index)">
      <el-collapse-item title="{{ item.title }}">
        <div v-html="item.content"></div> <!-- 这里假设content包含换行 -->
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      searchParams: { keyword: '' },
      // 假设filteredData是一个数组，item.content中有换行符
      filteredData: [],
    };
  },
  methods: {
    handleSearch() {
      const queryKeyword = this.searchParams.keyword;
      this.filteredData = this.filterData(queryKeyword); // 这里处理实际的查询逻辑，返回包含或不包含换行的数据显示数据
      // shouldShow函数判断是否应该显示该行
      this.shouldShow = (index) => {
        const content = this.filteredData[index].content.includes(queryKeyword);
        return content;
      }
    },
    filterData(keyword) {
      // 根据keyword过滤并处理数据逻辑，返回每个item是否应展示换行
    },
  },
};
</script>

在这个例子中，当用户输入的查询条件匹配某一行的内容时，对应的`el-collapse`会被展开；如果不匹配，则折叠起来。这实现了根据查询条件动态展开和收起表格内容的效果。