结合Element Ui 练习一个案例

题目要求

1. 需要使用element-plus组件库来实现

2. 需要在每行数据最后一列放置两个按钮：“删除”、“编辑”

3. 点击“删除”按钮，弹出是否删除确认框，实现删除功能

4. 点击“编辑”按钮，弹出编辑框，实现编辑功能

填充数据如下

[
  {
    id: 1,
    name: '登录接口_自动化测试平台项目',
    tester: 'shisuiyi',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '登录接口',
    create_time: '2019-11-06 14:50:30',
    testcases: 9
  },
  {
    id: 2,
    name: '注册接口_自动化测试平台项目',
    tester: '可可',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '自动化测试平台项目,注册接口',
    create_time: '2019-11-06 14:51:00',
    testcases: 0
  },
  {
    id: 3,
    name: '创建项目接口_自动化测试平台项目',
    tester: 'shisuiyi',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '这是自动化测试平台创建项目接口',
    create_time: '2019-11-06 14:51:45',
    testcases: 1
  },
  {
    id: 4,
    name: '注册接口_前程贷P2P金融项目',
    tester: '小可可',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 14:52:22',
    testcases: 0
  },
  {
    id: 5,
    name: '登录接口_前程贷P2P金融项目',
    tester: 'shisuiyi',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 14:52:40',
    testcases: 0
  },
  {
    id: 6,
    name: '查看项目列表接口_前程贷P2P金融项目',
    tester: 'shisuiyi',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 17:22:50',
    testcases: 1
  }
]

我的答案

<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="ID" prop="id" />
    <el-table-column label="接口名" prop="name" />
    <el-table-column label="测试人员" prop="tester" />
    <el-table-column label="项目名" prop="project" />
    <el-table-column label="项目ID" prop="project_id" />
    <el-table-column label="描述详细" prop="desc" />
    <el-table-column label="创建时间" prop="create_time" />
    <el-table-column label="用例数" prop="testcases" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="openDeleteDialog(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <!-- 编辑弹框 -->
  <el-dialog v-model="showEditDialog" title="编辑表格中的数据" width="50%">
    <template #default>
      <input v-model="editedRow.name" placeholder="接口名" />
      <input v-model="editedRow.tester" placeholder="测试人员" />
      <input v-model="editedRow.project" placeholder="项目名" />
      <input v-model="editedRow.project_id" placeholder="项目ID" />
      <input v-model="editedRow.desc" placeholder="描述详细" />
      <input v-model="editedRow.create_time" placeholder="描述详细" />
      <input v-model="editedRow.testcases" placeholder="用例数" />
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除弹框 -->
  <el-dialog v-model="handleDeleteDialogVisible" title="删除！！！" width="30%">
    <span>请确认是否删除</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDelete">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref,reactive} from 'vue'

// interface 是 TypeScript 语言中的一个关键字，用于定义对象的结构和属性类型。
interface User {
  id: number
  name: string
  tester: string
  project: string
  project_id: number
  desc: string
  create_time: string
  testcases: number
}

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)


let showEditDialog = ref(false)
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
  editRowIndex.value = index
  editedRow.value = { ...row }
  showEditDialog.value = true
}

// 首先，handleEdit是一个函数，它接受两个参数：index和row。index是当前行的索引，
// row是当前行的数据对象。在函数体内，我们首先使用console.log打印出这两个值，以便调试时查看。
// 然后，将index赋值给editRowIndex.value，使得editRowIndex的值变为当前行的索引。
// 接着，使用对象扩展运算符{ ...row }克隆row对象，并将结果赋值给editedRow.value，
// 从而实现对编辑行的数据进行修改。最后，将showEditDialog.value设置为true，显示编辑对话框。
const editRowIndex = ref(-1)
// 接下来，editRowIndex是一个ref响应式对象，初始值设为-1。
// 在编辑过程中，当点击某一行的编辑按钮时，会将该行的索引值赋给editRowIndex.value，以表示正在编辑的行的索引。
const editedRow = ref<User>({
  id: 0,
  name: '',
  tester: '',
  project: '',
  project_id: 0,
  desc: '',
  create_time: '',
  testcases: 0
})
// editedRow也是一个ref响应式对象，初始值是一个用户对象，
// 其中的各个属性都为空或默认值。用于存储正在编辑的行的数据，通过v-model绑定到编辑对话框的表单上。

const cancelEdit = () => {
  showEditDialog.value = false
  editRowIndex.value = -1
}
// 接着，cancelEdit函数用于取消编辑操作。
// 在函数体内，将showEditDialog.value设置为false，隐藏编辑对话框；将editRowIndex.value设置为-1，
// 表示没有正在编辑的行。
const confirmEdit = () => {
  if (editRowIndex.value > -1 && editedRow.value) {
  tableData.splice(editRowIndex.value, 1, { ...editedRow.value })

}
  showEditDialog.value = false
  editRowIndex.value = -1
}
// 最后，confirmEdit函数用于确认编辑操作。在函数体内，首先判断editRowIndex.value是否大于-1且editedRow.value是否存在。
// 如果满足条件，则使用tableData.splice方法将表格数据中对应的项替换为editedRow.value，从而实现编辑的更新操作
// 然后，将showEditDialog.value设置为false，隐藏编辑对话框；将editRowIndex.value设置为-1，表示没有正在编辑的行。
// tableData.splice(editRowIndex.value, 1, editedRow.value)的作用是将 editedRow.value 对象插入到 tableData 
// 数组中的 editRowIndex.value 索引位置，并替换掉原始的元素。通过这种方式，可以实现对表格数据的编辑操作。

const openDeleteDialog = (index: number) => {
  handleDelete.value = index
  handleDeleteDialogVisible.value = true
}

const handleDelete = ref(-1)
const handleDeleteDialogVisible = ref(false)
const cancelDelete = () => {
  handleDelete.value = -1
  handleDeleteDialogVisible.value = false
}

const confirmDelete = () => {
  if (handleDelete.value > -1) {
  tableData.splice(handleDelete.value, 1)
  // 删除表格数据后，Vue.js会自动重新渲染表格
}
  handleDelete.value = -1
  handleDeleteDialogVisible.value = false
}

const tableData = reactive<User[]>([
  {
    id: 1,
    name: '登录接口_自动化测试平台项目',
    tester: 'shisuiyi',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '登录接口',
    create_time: '2019-11-06 14:50:30',
    testcases: 9
  },
  {
    id: 2,
    name: '注册接口_自动化测试平台项目',
    tester: '可可',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '自动化测试平台项目,注册接口',
    create_time: '2019-11-06 14:51:00',
    testcases: 0
  },
  {
    id: 3,
    name: '创建项目接口_自动化测试平台项目',
    tester: 'shisuiyi',
    project: '自动化测试平台项目',
    project_id: 1,
    desc: '这是自动化测试平台创建项目接口',
    create_time: '2019-11-06 14:51:45',
    testcases: 1
  },
  {
    id: 4,
    name: '注册接口_前程贷P2P金融项目',
    tester: '小可可',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 14:52:22',
    testcases: 0
  },
  {
    id: 5,
    name: '登录接口_前程贷P2P金融项目',
    tester: 'shisuiyi',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 14:52:40',
    testcases: 0
  },
  {
    id: 6,
    name: '查看项目列表接口_前程贷P2P金融项目',
    tester: 'shisuiyi',
    project: '前程贷P2P金融项目',
    project_id: 2,
    desc: '',
    create_time: '2019-11-06 17:22:50',
    testcases: 1
  }
])
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>