Vue 컴포넌트 실습: 데이터 필터링 컴포넌트 개발

Vue 컴포넌트 실습: 데이터 필터링 컴포넌트 개발

Vue 개발에서 데이터 필터링은 흔히 사용되는 기능 중 하나입니다. 이 기사에서는 Vue 구성 요소의 실제 사용, 즉 데이터 필터링 구성 요소 개발에 대해 자세히 알아보고, 특정 코드 예제를 통해 구현 프로세스를 시연하고, Vue 구성 요소의 사용을 깊이 이해하는 데 도움을 줍니다.

먼저 요구 사항을 명확히 해야 합니다. 입력 상자, 다중 선택 상자, 날짜 선택, 범위 선택 등을 포함하여 프런트 엔드에서 간단한 필터링 작업을 수행할 수 있는 데이터 필터링 구성 요소를 개발하는 것입니다. 다양한 시나리오의 데이터 필터링 요구 사항을 충족합니다.

필요에 따라 구성 요소를 다음 부분으로 나눌 수 있습니다.

1. 입력 상자 필터링

코드는 다음과 같습니다.

<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>

이 구성 요소에는 입력 상자와 검색 버튼이 포함되어 있으며 사용자는 입력란에 키워드를 입력합니다. 입력 상자에서 검색 버튼을 클릭하면 search 이벤트가 실행되고 검색 키워드가 상위 구성 요소로 전달됩니다. search事件，并传递搜索关键词给父组件。

2. 多选框筛选

代码如下：

<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>

该组件包含一个多选框和一个标题，用户在多选框中选择需要筛选的选项后，将触发change事件，并传递选中的选项给父组件。

3. 日期选择筛选

代码如下：

<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>

该组件包含两个日期选择器，用户可以选择起始日期和结束日期，选中后将触发change事件，并将选中的日期范围传递给父组件。

4. 范围选择筛选

代码如下：

<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>

该组件包含两个数字输入框，用户可以选择数值范围，选中后将触发change

다중 선택 상자 필터링

코드는 다음과 같습니다.

<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>

이 구성 요소에는 사용자가 필터링해야 하는 옵션을 선택한 후 다중 선택 상자와 제목이 포함되어 있습니다. 다중 선택 상자에서는 change 이벤트가 트리거되고 선택한 옵션이 상위 구성 요소에 전달됩니다.

날짜 선택 필터

코드는 다음과 같습니다. 🎜rrreee🎜이 구성 요소에는 시작 날짜와 종료 날짜를 선택할 수 있습니다. 이벤트가 발생하고 선택한 날짜 범위가 상위 구성요소에 전달됩니다. 🎜
🎜범위 선택 필터🎜🎜🎜코드는 다음과 같습니다. 🎜rrreee🎜이 구성 요소에는 두 개의 숫자 입력 상자가 포함되어 있습니다. 선택하면 변경 이벤트가 트리거되고 선택한 범위가 상위 구성 요소에 전달됩니다. 🎜🎜위의 네 가지 구성 요소를 조합하여 다차원 데이터 스크리닝을 구현할 수 있습니다. 상위 구성 요소에서 이러한 하위 구성 요소를 결합하여 완전한 데이터 필터링 기능을 완성할 수 있습니다. 🎜🎜코드는 다음과 같습니다. 🎜rrreee🎜다음은 필터링 구성 요소의 몇 가지 간단한 예입니다. 실제 필요에 따라 구성 요소를 결합하고 확장하여 데이터 필터링 기능을 강화할 수 있습니다. 🎜🎜요약🎜🎜이 기사에서는 Vue 구성 요소의 실제 사용, 즉 데이터 필터링 구성 요소 개발을 자세히 소개하고 독자가 Vue 구성 요소의 사용을 더 잘 이해할 수 있도록 여러 특정 코드 예제를 제공합니다. 일상적인 개발에서 데이터 스크리닝이 필요한 경우 위 구성요소를 통해 이를 구현하여 개발 효율성과 사용자 경험을 향상시킬 수 있습니다. 🎜

위 내용은 Vue 컴포넌트 실습: 데이터 필터링 컴포넌트 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!