1
0

userTable.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <el-table :data="tableData" style="width: 100%">
  3. <el-table-column prop="id" label="用户ID" width="180"></el-table-column>
  4. <el-table-column prop="userAccount" label="用户账号" width="180"></el-table-column>
  5. <el-table-column prop="userName" label="用户名称"></el-table-column>
  6. <el-table-column prop="userAvatar" label="用户头像"></el-table-column>
  7. <el-table-column prop="userRole" label="用户角色"></el-table-column>
  8. <el-table-column prop="createTime" label="创建时间"></el-table-column>
  9. <el-table-column prop="updateTime" label="更新时间"></el-table-column>
  10. <el-table-column label="操作">
  11. <template #default="scope">
  12. <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
  13. <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  14. </template>
  15. </el-table-column>
  16. </el-table>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. // tableData: []
  23. };
  24. },
  25. props:["tableData"],
  26. methods: {
  27. handleEdit(index, row) {
  28. this.$emit('edit', row);
  29. },
  30. handleDelete(index, row) {
  31. this.$emit('delete', row);
  32. }
  33. },
  34. computed:{
  35. tableData() {
  36. return this.tableData;
  37. }
  38. },
  39. updated() {
  40. console.log(this.tableData);
  41. }
  42. };
  43. </script>