一、增加功能
表格
<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 = indexconsole.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 = indexconsole.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>
