Vue3学习(二)集成ElementPlus实现增删改查

一、增加功能

        表格

新增数据


            
                
                
                
                
                    
                
            
        



const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

        新增弹窗

导入包装数据所需的组件 

import {ref, reactive} from "vue";

 定义变量

let dialogFormVisible = ref(false)
    let form = reactive({})

点击新增数据时功能实现

//新增数据 设置新的空的绑值对象 打开弹窗
    const handleAdd = () => {
        form = reactive({})
        //打开弹窗
        dialogFormVisible.value = true
    }


//保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
    const save = () => {
        
            //新增
            tableData.push(form)
 

        dialogFormVisible.value = false
    }

二、编辑功能

        编辑按钮

//全局保存编辑的行号
    const globalIndex = ref(-1)

        编辑功能

 //编辑数据 先赋值到表单再弹窗
    const handleEdit = (row, index) => {
        const newObj = Object.assign({}, row)
        form = reactive(newObj)
        //把当前编辑的行号赋值给全局保存的行号
        globalIndex.value = index
        console.log(globalIndex.value)
        dialogFormVisible.value = true
    }

        保存数据

 //保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
    const save = () => {
        if (globalIndex.value >= 0) {
            //表示编辑
            tableData.value[globalIndex.value] = form
            //还原回去
            globalIndex.value = -1
        } else {
            //新增
            tableData.value.push(form)
        }

        dialogFormVisible.value = false
    }

三、删除功能

        删除按钮

        删除功能

//删除数据 从index位置开始，删除一行即可
    const remove = (index) => {
        tableData.value.splice(index, 1)
    }

四、查询数据

        查询按钮

        查询数据

        查询功能 

//查询数据
    const search = () =>{
        tableData.value = tableData.value.filter(v =>v.name.includes(name.value))
    }

        完整代码