<template>
  <el-space>
    <el-button type="primary">新增</el-button>
    <el-input v-model="input">
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </el-space>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column align="center" prop="date" label="Date" width="180" />
    <el-table-column align="center" prop="name" label="Name" width="180" />
    <el-table-column align="center" prop="address" label="Address" />
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
const input = ref("");

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const handleDelete = () => {};
</script>

<style lang="scss" scoped></style>
