员工管理系统vue写一个element-plus组件，使用setup语法糖

在Vue中使用Element Plus库编写员工管理系统的组件，尤其是利用`setup`语法糖，可以简化组件的结构，并让代码更易于理解和维护。下面是一个基本的例子，假设我们有一个用于显示员工列表的组件：

<template>
  <el-table :data="employees" style="width: 100%">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="position" label="职位"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from "element-plus";

const employees = ref([
  { id: 1, name: '张三', position: '经理' },
  { id: 2, name: '李四', position: '主管' },
  // 更多员工数据...
]);

// Element Plus Table组件
const table = new ElTable({
  data: employees.value,
});

onMounted(() => {
  // 初始化表格
  table.init();
});
</script>

在这个例子中，`setup`语法允许我们将状态（如`employees`数组）和计算（如初始化表格）提取到单独的函数中。`ref`用于创建响应式的数据，而`onMounted`则是挂载阶段的一个生命周期钩子。