index.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <el-space>
  3. <el-button type="primary">新增</el-button>
  4. <el-input v-model="input">
  5. <template #append>
  6. <el-button :icon="Search" />
  7. </template>
  8. </el-input>
  9. </el-space>
  10. <el-table :data="tableData" style="width: 100%">
  11. <el-table-column align="center" prop="date" label="Date" width="180" />
  12. <el-table-column align="center" prop="name" label="Name" width="180" />
  13. <el-table-column align="center" prop="address" label="Address" />
  14. <el-table-column align="center" label="操作">
  15. <template #default="scope">
  16. <el-button
  17. size="small"
  18. type="danger"
  19. @click="handleDelete(scope.$index, scope.row)"
  20. >删除</el-button
  21. >
  22. </template>
  23. </el-table-column>
  24. </el-table>
  25. </template>
  26. <script setup>
  27. import { Search } from "@element-plus/icons-vue";
  28. const input = ref("");
  29. const tableData = [
  30. {
  31. date: "2016-05-03",
  32. name: "Tom",
  33. address: "No. 189, Grove St, Los Angeles",
  34. },
  35. {
  36. date: "2016-05-02",
  37. name: "Tom",
  38. address: "No. 189, Grove St, Los Angeles",
  39. },
  40. {
  41. date: "2016-05-04",
  42. name: "Tom",
  43. address: "No. 189, Grove St, Los Angeles",
  44. },
  45. {
  46. date: "2016-05-01",
  47. name: "Tom",
  48. address: "No. 189, Grove St, Los Angeles",
  49. },
  50. ];
  51. const handleDelete = () => {};
  52. </script>
  53. <style lang="scss" scoped></style>