<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180">
      <template #default="scope">
        <div class="name-wrapper">
          <el-tag size="small">{{ scope.row.name }}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column>
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search"></el-input>
      </template>
      <template #default="{$index, row}">
        <el-button size="small" @click="handleEdit($index, row)">Edit</el-button>
        <el-button size="small" @click="handleDelete($index, row)" type="danger">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>


<script>
export default {
  name: "Table_Demo4",
  data() {
    return {
      search: "",
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-04",
          name: "Tom1",
          address: "No. 1891, Grove St, Los Angeles"
        },
        {
          date: "2016-05-05",
          name: "Tom2",
          address: "No. 1892, Grove St, Los Angeles"
        },
        {
          date: "2016-05-06",
          name: "Tom3",
          address: "No. 1893, Grove St, Los Angeles"
        },
      ]
    }
  },
  methods: {
    handleEdit: (index, row)=>{
      console.log(index, row);
    },
    handleDelete: (index, row)=>{
      console.log(index, row);
    }
  }
}
</script>


<style scoped>

</style>
