vue组件实现员工列表

Vue 组件实现员工列表

创建员工列表组件

新建一个 Vue 单文件组件 EmployeeList.vue，包含模板、脚本和样式部分。组件接收员工数据并渲染列表。

<template>
  <div class="employee-list">
    <h3>员工列表</h3>
    <ul>
      <li v-for="employee in employees" :key="employee.id">
        {{ employee.name }} - {{ employee.position }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    employees: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.employee-list {
  margin: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

使用组件

在父组件中导入并使用 EmployeeList 组件，传递员工数据。

<template>
  <div>
    <EmployeeList :employees="employeeData" />
  </div>
</template>

<script>
import EmployeeList from './EmployeeList.vue'

export default {
  components: {
    EmployeeList
  },
  data() {
    return {
      employeeData: [
        { id: 1, name: '张三', position: '前端开发' },
        { id: 2, name: '李四', position: '后端开发' },
        { id: 3, name: '王五', position: 'UI设计' }
      ]
    }
  }
}
</script>

添加交互功能

扩展组件功能，支持选中员工和删除操作。

<template>
  <div class="employee-list">
    <h3>员工列表</h3>
    <ul>
      <li 
        v-for="employee in employees" 
        :key="employee.id"
        @click="selectEmployee(employee)"
        :class="{ selected: selectedEmployee === employee }"
      >
        {{ employee.name }} - {{ employee.position }}
        <button @click.stop="deleteEmployee(employee.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    employees: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedEmployee: null
    }
  },
  methods: {
    selectEmployee(employee) {
      this.selectedEmployee = employee
      this.$emit('employee-selected', employee)
    },
    deleteEmployee(id) {
      this.$emit('employee-deleted', id)
    }
  }
}
</script>

<style scoped>
.selected {
  background-color: #f0f0f0;
}
button {
  margin-left: 10px;
}
</style>

父组件处理事件

在父组件中处理子组件发出的事件。

<template>
  <div>
    <EmployeeList 
      :employees="employeeData" 
      @employee-selected="handleEmployeeSelected"
      @employee-deleted="handleEmployeeDeleted"
    />
    <div v-if="selectedEmployee">
      已选择: {{ selectedEmployee.name }}
    </div>
  </div>
</template>

<script>
import EmployeeList from './EmployeeList.vue'

export default {
  components: {
    EmployeeList
  },
  data() {
    return {
      employeeData: [
        { id: 1, name: '张三', position: '前端开发' },
        { id: 2, name: '李四', position: '后端开发' },
        { id: 3, name: '王五', position: 'UI设计' }
      ],
      selectedEmployee: null
    }
  },
  methods: {
    handleEmployeeSelected(employee) {
      this.selectedEmployee = employee
    },
    handleEmployeeDeleted(id) {
      this.employeeData = this.employeeData.filter(e => e.id !== id)
    }
  }
}
</script>

添加搜索过滤

实现员工列表的搜索功能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索员工..." />
    <EmployeeList 
      :employees="filteredEmployees" 
      @employee-selected="handleEmployeeSelected"
      @employee-deleted="handleEmployeeDeleted"
    />
  </div>
</template>

<script>
import EmployeeList from './EmployeeList.vue'

export default {
  components: {
    EmployeeList
  },
  data() {
    return {
      searchQuery: '',
      employeeData: [
        { id: 1, name: '张三', position: '前端开发' },
        { id: 2, name: '李四', position: '后端开发' },
        { id: 3, name: '王五', position: 'UI设计' }
      ]
    }
  },
  computed: {
    filteredEmployees() {
      const query = this.searchQuery.toLowerCase()
      return this.employeeData.filter(employee => 
        employee.name.toLowerCase().includes(query) || 
        employee.position.toLowerCase().includes(query)
      )
    }
  },
  methods: {
    handleEmployeeSelected(employee) {
      console.log('Selected:', employee)
    },
    handleEmployeeDeleted(id) {
      this.employeeData = this.employeeData.filter(e => e.id !== id)
    }
  }
}
</script>