• 與：有假則假，全真為真
• 或：有真則真，全假為假
• 且：filterCondition === ‘a(chǎn)ndContain’ || filterCondition === ‘a(chǎn)ndNotContain’ || filterCondition === ‘a(chǎn)ndFuzzyContain’
• 三元表達(dá)式：const age = 18;const isAdult = age >= 18 ? true : false; console.log(isAdult); // true

與和或應(yīng)該是兩個(gè)條件進(jìn)行查詢，其余則是一個(gè)條件

  <div>
        <!-- 與/或 -->
        <template v-if="filterCondition === 'orContain' || filterCondition === 'orNotContain'">
          <el-input v-model="keyword1" placeholder="輸入關(guān)鍵字1進(jìn)行篩選" style="width: 25%;"></el-input>
          <el-input v-model="keyword2" placeholder="輸入關(guān)鍵字2進(jìn)行篩選" style="width: 25%;"></el-input>
        </template>
        <!-- 包含/不包含/模糊查詢/非 -->
        <template
          v-else="filterCondition === 'andContain' || filterCondition === 'andNotContain' || filterCondition === 'andFuzzyContain'">
          <el-input v-model="keyword" placeholder="輸入關(guān)鍵字進(jìn)行篩選" style="width: 25%;"></el-input>
        </template>

        <el-select v-model="filterCondition" placeholder="選擇篩選條件" style="margin-left: 30px;">
          <el-option v-for="condition in filterConditions" :key="condition.value" :label="condition.label"
            :value="condition.value"></el-option>
        </el-select>
        <el-button style="margin-left: 30px;" type="primary" @click="filter">篩選</el-button>
      </div>
    </el-form>
    <el-table :data="filteredData" style="width: 70%;margin-top: 30px;" :header-cell-style="{
      backgroundColor: '#d7e9fa',
      color: '#5e5f5f',
      textAlign: 'center',
    }" :cell-style="{ textAlign: 'center' }">
      <el-table-column label="工況名稱" prop="name"></el-table-column>
      <el-table-column label="測(cè)點(diǎn)號(hào)" prop="age"></el-table-column>
      <el-table-column label="測(cè)點(diǎn)名稱" prop="gender"></el-table-column>
      <el-table-column label="幅值(g)" prop="amplitude"></el-table-column>
      <el-table-column label="頻率(Hz)" prop="frequency"></el-table-column>
    </el-table>
  </div>
 <script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: '',
        date1: '',
        date2: ''
      },
      keyword: "",
      keyword1: "",
      keyword2: "",
      filterCondition: "",
      filteredData: [],
      filterConditions: [
        { label: "包含", value: "andContain" },
        { label: "不包含", value: "andNotContain" },
        { label: "包含（模糊查詢）", value: "andFuzzyContain" },
        { label: "與", value: "orContain" },
        { label: "或", value: "orNotContain" },
        { label: "非", value: "notContain" },
      ],
      data: [
        { id: 1, name: "A01-MCRO-Time-K-J-02-66-90D", age: '3:A104Z', gender: "3:A104Z", amplitude: '-0.000454102', frequency: '120.013' },
        { id: 2, name: "A01-MCRO-Time-K-J-02-67-90D", age: '4:A104Y', gender: '4:A104Y', amplitude: '0.000567725', frequency: '129.268' },
        { id: 3, name: "A01-MCRO-Time-K-J-02-68-90D", age: '5:A104X', gender: '5:A104X', amplitude: '-0.00793945', frequency: '248.102' },
        { id: 4, name: "A01-MCRO-Time-K-J-02-69-90D", age: '6:A121X', gender: '6:A121X', amplitude: '0.01036', frequency: '312.637' },
        { id: 5, name: "A01-MCRO-Time-K-J-02-70-90D", age: '7:A104Z', gender: "7:A104Z", amplitude: '-0.000454102', frequency: '120.013' },
        { id: 6, name: "A01-MCRO-Time-K-J-02-71-90D", age: '8:A104Y', gender: '8:A104Y', amplitude: '0.000567725', frequency: '129.268' },
        { id: 7, name: "A01-MCRO-Time-K-J-02-72-90D", age: '9:A104X', gender: '9:A104X', amplitude: '-0.00793945', frequency: '248.102' },
        { id: 8, name: "A01-MCRO-Time-K-J-02-73-90D", age: '10:A121X', gender: '10:A121X', amplitude: '0.01036', frequency: '312.637' },
      ],
    };
  },
  mounted() {
    this.filteredData = [...this.data];
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    filter() {
      const filterCondition = this.filterCondition;
      const data = this.data;
      // 包含
      if (filterCondition === "andContain") {
        this.filteredData = data.filter((item) =>
          Object.values(item).some((value) =>
            String(value).toLowerCase().includes(this.keyword.trim().toLowerCase())
          )
        );
      // 不包含
      } else if (filterCondition === "andNotContain") {
        this.filteredData = data.filter((item) =>
          Object.values(item).every((value) =>
            !String(value).toLowerCase().includes(this.keyword.trim().toLowerCase())
          )
        );
        // 模糊查詢（=包含）
      } else if (filterCondition === "andFuzzyContain") {
        this.filteredData = data.filter((item) =>
          Object.values(item).some((value) =>
            String(value).toLowerCase().includes(this.keyword.trim().toLowerCase())
          )
        );
       // 與
      } else if (filterCondition === "orContain") {
        this.filteredData = data.filter((item) => {
          const keywords = [this.keyword1, this.keyword2].map(keyword => keyword.trim().toLowerCase());
          return keywords.some(keyword => {
            return Object.values(item).some(value => {
              return String(value).toLowerCase().includes(keyword);
            });
          });
        });
        // 或
      } else if (filterCondition === "orNotContain") {
        const keyword1 = this.keyword1.trim().toLowerCase();
        const keyword2 = this.keyword2.trim().toLowerCase();
        if (keyword1 === "" && keyword2 === "") {
          this.filteredData = [];
        } else {
          this.filteredData = data.filter((item) =>
            Object.values(item).some((value) =>
              String(value).toLowerCase().includes(keyword1) ||
              String(value).toLowerCase().includes(keyword2)
            )
          );
        }
        // 非
      } else if (filterCondition === "notContain") {
        this.filteredData = data.filter((item) =>
          Object.values(item).every((value) =>
            !String(value).toLowerCase().includes(this.keyword.trim().toLowerCase())
          )
        );
      }
    },
  },
};
</script>