Vue component practice: data filtering component development

Vue component practice: data filtering component development

In Vue development, data filtering is one of the commonly used functions. This article will take you to learn more about the actual use of Vue components: the development of data filtering components, demonstrate its implementation process through specific code examples, and help you deeply understand the use of Vue components.

First of all, we need to clarify our needs, which is to develop a data filtering component that can perform simple filtering operations on the front end, including input boxes, multi-select boxes, date selection, range selection, etc., to meet the needs of different scenarios. Data filtering requirements.

According to requirements, we can split the component into the following parts:

1. Input box filtering

The code is as follows:

<template>
  <div class="input-filter">
    <input type="text" v-model="value" placeholder="请输入关键词" @input="changeInput">
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    changeInput(event) {
      this.value = event.target.value;
    },
    search() {
      this.$emit("search", this.value);
    }
  }
};
</script>

<style scoped>
.input-filter {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
}
.input-filter input {
  margin-right: 10px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.input-filter button {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #1989fa;
  color: #fff;
  border: none;
  font-size: 14px;
}
</style>

This component contains an input box and a search button. The user enters keywords in the input box. After clicking the search button, the search event will be triggered and the search keywords will be passed to the parent component.

2. Multi-select box filtering

The code is as follows:

<template>
  <div class="checkbox-filter">
    <div class="title">{{ title }}</div>
    <el-checkbox-group v-model="checkedList" @change="handleChange">
      <el-checkbox v-for="item in options" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: []
    };
  },
  methods: {
    handleChange(checkedList) {
      this.$emit("change", checkedList);
    }
  }
};
</script>

<style scoped>
.checkbox-filter {
  margin-bottom: 10px;
}
.checkbox-filter .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
</style>

This component contains a multi-select box and a title, and the user selects in the multi-select box After selecting the options that need to be filtered, the change event will be triggered and the selected options will be passed to the parent component.

3. Date selection filter

The code is as follows:

<template>
  <div class="date-filter">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-date-picker v-model="start" type="date" placeholder="开始日期" @change="handleChange" />
      </el-col>
      <el-col :span="12">
        <el-date-picker v-model="end" type="date" placeholder="结束日期" @change="handleChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start: "",
      end: ""
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        start: this.start,
        end: this.end
      });
    }
  }
};
</script>

<style scoped>
.date-filter {
  margin-bottom: 10px;
}
</style>

This component contains two date pickers, the user can select the start date and end date, After selection, the change event will be triggered and the selected date range will be passed to the parent component.

4. Range selection filtering

The code is as follows:

<template>
  <div class="range-filter">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-input-number v-model.number="min" controls-position="right" :min="0" :step="1" @change="handleChange" />
      </el-col>
      <el-col :span="12">
        <el-input-number v-model.number="max" controls-position="right" :min="0" :step="1" @change="handleChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      min: 0,
      max: 0
    };
  },
  methods: {
    handleChange() {
      this.$emit("change", {
        min: this.min,
        max: this.max
      });
    }
  }
};
</script>

<style scoped>
.range-filter {
  margin-bottom: 10px;
}
</style>

This component contains two numeric input boxes. The user can select a numerical range. Once selected, it will be triggered. change event and pass the selected range to the parent component.

The above four components can be used in combination to achieve multi-dimensional data filtering. In the parent component, we can combine these sub-components to complete the complete data filtering function.

The code is as follows:

<template>
  <div class="filter-container">
    <input-filter @search="onSearch" />
    <checkbox-filter :title="title1" :options="options1" @change="onChange1" />
    <date-filter @change="onChange2" />
    <range-filter @change="onChange3" />
  </div>
</template>

<script>
import InputFilter from "./InputFilter.vue";
import CheckboxFilter from "./CheckboxFilter.vue";
import DateFilter from "./DateFilter.vue";
import RangeFilter from "./RangeFilter.vue";

export default {
  components: {
    InputFilter,
    CheckboxFilter,
    DateFilter,
    RangeFilter
  },
  data() {
    return {
      title1: "多选框筛选",
      options1: [
        { label: "选项1", value: 1 },
        { label: "选项2", value: 2 },
        { label: "选项3", value: 3 }
      ]
    };
  },
  methods: {
    onSearch(value) {
      console.log("搜索关键词：", value);
    },
    onChange1(value) {
      console.log("多选框选中的值：", value);
    },
    onChange2(value) {
      console.log("日期选择范围：", value);
    },
    onChange3(value) {
      console.log("范围选择范围：", value);
    }
  }
};
</script>

<style scoped>
.filter-container {
  margin: 20px;
}
</style>

Here are just some simple examples of filtering components. You can combine and expand them according to actual needs to enrich your data filtering capabilities.

Summary

This article introduces in detail the actual combat of Vue components: the development of data filtering components, and provides multiple specific code examples to allow readers to better understand the use of Vue components. In daily development, if you encounter the need for data filtering, you can implement it through the above components to improve development efficiency and user experience.

The above is the detailed content of Vue component practice: data filtering component development. For more information, please follow other related articles on the PHP Chinese website!