简易版增删改查

目录结构

input.vue

javascript 复制代码

<template>
    <div>
        <input v-model="inputValue" @keyup.enter="handleSubmit" placeholder="请输入待办事项" />
        <button @click="handleSubmit" @keyup.entry>添加</button>
    </div>
</template>

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

const inputValue = ref('')

const emit = defineEmits(['add-todo'])

const handleSubmit = () => {
    console.log('内容：', inputValue.value);

    if (inputValue.value.trim()) {
        emit('add-todo', inputValue.value.trim())
        inputValue.value = ''
    }
}
</script>

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

home.vue

javascript 复制代码

<template>
    <div>
        <Input @add-todo="addTodo"></Input>
        <el-table :data="paginatedTodos" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column label="待办事项">
                <template #default="{row}">
                    <span :class="{ 'red strikethrough': selectedRows.includes(row) }" v-if="!row.editing">{{ row.content }}</span>
                    <el-input 
                        v-else 
                        v-model="row.editContent" 
                        @keyup.enter="saveEdit(row)"
                        @blur="saveEdit(row)"
                        ref="editInput"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" #default="{row}">
                <el-button v-if="!row.editing" @click="startEdit(row)">修改</el-button>
                <el-button v-else @click="saveEdit(row)" type="success">保存</el-button>
                <el-button @click="del(row)">删除</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="todos.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Input from '../components/Input.vue'

interface Todo {
  id: number
  content: string
  editing?: boolean
  editContent?: string
}

const todos = ref<Todo[]>([])
const selectedRows = ref<Todo[]>([])
const currentPage = ref(1)
const pageSize = ref(10)

// 计算分页后的数据
const paginatedTodos = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return todos.value.slice(start, end)
})

const addTodo = (content: string) => {
  todos.value.push({
    id: Date.now(),
    content,
  })
}

const del = (row: Todo) => {
  console.log('删除的：', row)
  // 删除点击行数据
  todos.value = todos.value.filter(item => item.id !== row.id)
  console.log('删除后的：', todos.value)
}

// 开始编辑
const startEdit = (row: Todo) => {
  row.editing = true
  row.editContent = row.content
}

// 保存编辑
const saveEdit = (row: Todo) => {
  if (row.editContent && row.editContent.trim() !== '') {
    row.content = row.editContent
  }
  row.editing = false
  row.editContent = ''
}

// 处理表格行选择变化
const handleSelectionChange = (selection: Todo[]) => {
  selectedRows.value = selection
}

// 处理页面大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

// 处理当前页变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}
</script>

<style scoped>
.red {
  color: red;
}

.strikethrough {
  text-decoration: line-through;
}
</style>