You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.6 KiB
68 lines
1.6 KiB
<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>
|
|
|