当前位置：首页 > VUE

vue组件实现员工列表

2026-02-21 13:00:13VUE

实现员工列表的Vue组件

组件结构设计

创建一个名为EmployeeList.vue的单文件组件，包含模板、脚本和样式三部分。模板部分使用<table>或<ul>标签展示列表数据，脚本部分处理数据逻辑。

<template>
  <div class="employee-list">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>部门</th>
          <th>职位</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.id }}</td>
          <td>{{ employee.name }}</td>
          <td>{{ employee.department }}</td>
          <td>{{ employee.position }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

数据定义与获取

在<script>部分定义员工数据，可通过API获取或本地静态数据。使用data()函数返回响应式数据对象。

vue组件实现员工列表

<script>
export default {
  data() {
    return {
      employees: [
        { id: 1, name: '张三', department: '技术部', position: '前端工程师' },
        { id: 2, name: '李四', department: '产品部', position: '产品经理' }
      ]
    }
  },
  methods: {
    async fetchEmployees() {
      try {
        const response = await axios.get('/api/employees');
        this.employees = response.data;
      } catch (error) {
        console.error('获取员工列表失败:', error);
      }
    }
  },
  mounted() {
    this.fetchEmployees();
  }
}
</script>

样式优化

添加CSS样式美化表格，使用Scoped样式确保样式只作用于当前组件。

<style scoped>
.employee-list {
  margin: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>

组件交互功能

增加排序、筛选或分页功能提升用户体验。使用计算属性实现客户端排序或筛选。

vue组件实现员工列表

<script>
export default {
  data() {
    return {
      employees: [],
      sortField: 'id',
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedEmployees() {
      return [...this.employees].sort((a, b) => {
        let modifier = this.sortDirection === 'asc' ? 1 : -1;
        return a[this.sortField] > b[this.sortField] ? modifier : -modifier;
      });
    }
  },
  methods: {
    sortBy(field) {
      if (this.sortField === field) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortField = field;
        this.sortDirection = 'asc';
      }
    }
  }
}
</script>

组件复用与Props

通过props接收外部传入的员工数据，使组件更通用。

<script>
export default {
  props: {
    initialEmployees: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      employees: this.initialEmployees
    }
  }
}
</script>

使用示例

在父组件中引入并使用EmployeeList组件，可传入初始数据或依赖组件内部获取数据。

<template>
  <div>
    <employee-list :initial-employees="preloadedEmployees" />
  </div>
</template>

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

export default {
  components: { EmployeeList },
  data() {
    return {
      preloadedEmployees: [
        { id: 3, name: '王五', department: '市场部', position: '市场专员' }
      ]
    }
  }
}
</script>