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

最新推荐文章于 2024-06-20 11:40:33 发布

抓蛙宫城石

最新推荐文章于 2024-06-20 11:40:33 发布

阅读量3.1k

点赞数 2

文章标签：学习

本文链接：https://blog.csdn.net/m0_64393446/article/details/131372980

版权

一、增加功能

表格

<div style="padding: 10px">
<el-button type="primary" @click="handleAdd">新增数据</el-button>

<div style="margin: 10px 0">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180"/>
                <el-table-column prop="name" label="姓名" width="180"/>
                <el-table-column prop="address" label="地址"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>



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',
  },
]

新增弹窗

 <!--弹窗-->
        <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
            <el-form :model="form" label-width="100px" style="padding-right:30px ">
                <el-form-item label="日期">
                    <el-input v-model="form.date" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </span>
            </template>
        </el-dialog>

导入包装数据所需的组件

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
    }

二、编辑功能

编辑按钮

<el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>

//全局保存编辑的行号
    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
    }

三、删除功能

删除按钮

 <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>

删除功能

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

四、查询数据

查询按钮

<el-input style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></el-input>
        <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>

查询功能

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

完整代码

<template>
    <div style="padding: 10px">

        <el-input style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></el-input>
        <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>

        <el-button type="primary" @click="handleAdd">新增数据</el-button>

        <div style="margin: 10px 0">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180"/>
                <el-table-column prop="name" label="姓名" width="180"/>
                <el-table-column prop="address" label="地址"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)">编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click.prevent="remove(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--弹窗-->
        <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
            <el-form :model="form" label-width="100px" style="padding-right:30px ">
                <el-form-item label="日期">
                    <el-input v-model="form.date" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>

    import {reactive, ref} from "vue";

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

    let dialogFormVisible = ref(false)
    let form = reactive({})
    //全局保存编辑的行号
    const globalIndex = ref(-1)
    const name = ref('')

    //新增数据 设置新的空的绑值对象 打开弹窗
    const handleAdd = () => {
        form = reactive({})
        //打开弹窗
        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
    }

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

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

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


</script>