vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）

这篇文章距离上次修改已过224天，其中的内容可能已经有所变动。

在Vue和Element UI中，你可以使用v-for指令动态渲染一个列表，并使用Element UI的Select组件来实现条件筛选的功能。以下是一个简单的例子，展示了如何动态添加筛选条件：

<template>
  <div>
    <el-row v-for="(condition, index) in conditions" :key="index">
      <el-col :span="18">
        <el-select v-model="condition.name" placeholder="请选择条件">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button @click="removeCondition(index)">移除</el-button>
      </el-col>
    </el-row>
    <el-button @click="addCondition">添加条件</el-button>
    <!-- 查询按钮 -->
    <el-button type="primary">查询</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      conditions: [{ name: '' }], // 初始条件
      options: [ // 条件选项
        { label: '条件1', value: 'condition1' },
        { label: '条件2', value: 'condition2' },
        // ...更多条件
      ],
    };
  },
  methods: {
    addCondition() {
      this.conditions.push({ name: '' });
    },
    removeCondition(index) {
      this.conditions.splice(index, 1);
    },
  },
};
</script>

在这个例子中，conditions数组用于存储筛选条件。每个条件是一个对象，包含name属性，对应Select组件选中的值。options数组定义了可用的筛选条件。

addCondition方法用于向conditions数组添加新的空条件对象，removeCondition方法则用于移除指定索引的条件。

用户可以点击“添加条件”按钮来增加新的筛选条件，选择条件后点击“查询”按钮可以执行查询操作。如果需要全选条件，可以添加一个全选的条件选项，并在conditions数组中为每个条件设置相应的值。

vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件（支持全选、反选、清空）

评论已关闭

推荐阅读