vue3中，el-table表格中基础的查询、重置、新增、编辑回显、删除

vue3中，el-table表格中基础的查询、重置、新增、编辑回显、删除

效果

1

2

3

代码

1、主页面

index.vue

<!--
@Description 申请表管理 - 活动类型管理
@author wdd
@date 2024/3/22
-->
<template>
    <centerHead title="活动类型管理"></centerHead>
    <div class="content">
        <div class="left">
            <div class="ser-box">
                <el-form :model="formInline" :inline="true" label-width="110px">
                    <el-form-item label="活动类型名称：">
                        <el-input type="text" v-model="formInline.templateTypeName" placeholder="请输入" clearable
                            @clear="getList">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="活动类型编码：">
                        <el-input type="text" v-model="formInline.templateTypeCode" placeholder="请输入" clearable
                            @clear="getList">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                        <el-button type="primary" @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="addForm('add',{})">新增</el-button>
            <el-table :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="tableData" class="table">
                <el-table-column prop="templateTypeName" align="center" label="代码分类名称"></el-table-column>
                <el-table-column prop="templateTypeCode" align="center" label="代码分类编码"></el-table-column>
                <el-table-column label="操作" align="right" width="260">
                    <template #default="scope">
                        <span class="text-btn" @click="addForm('edit',scope.row)">编辑</span>
                        <span class="del-btn" @click="onDelete(scope.row.id)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagin-bottom">
                <el-pagination :current-page="page.currentPage" layout="total,sizes,prev,pager,next,jumper"
                    :page-size="page.pageSize" :page-sizes="[5,10, 20, 30]" :total="page.total"
                    @current-change="hanleCurrentChange" @size-change="handleSizeChange" />
            </div>
            <DialogType v-if="showClassify" v-model:dialogVisible="showClassify" :info-data="classifyInfo"
                @emit-confirm="classifyOk" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue';
import { useRouter } from 'vue-router'
import { post } from "@/utils/path.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import DialogType from './components/DialogType.vue'
const router = useRouter();
const constant = inject('constant')
const verification = inject('verification');
const message = inject('message')
const tableData = ref([])
const formInline = ref({
    templateTypeName: '',
    templateTypeCode: ''
})
const page = reactive({
    pageSize: 10,
    currentPage: 1,
    total: 0,
})
const showClassify = ref(false)
const classifyInfo = ref({})
const addForm = (type: any, row: any) => {
    row.typeName = type
    classifyInfo.value = row
    showClassify.value = true
}
const classifyOk = () => {
    getList()
 }
 // 查询
const onSearch = () => {
    var msg1 = verification.checkParam('活动类型名称', formInline.value.templateTypeName, false, 50);
    if (msg1 != null) {
        message.error(msg1)
        return
    } 
    var msg2 = verification.checkParam('活动类型编码', formInline.value.templateTypeCode, false, 50);
    if (msg2 != null) {
        message.error(msg2)
        return
    } 
    getList()
}
// 列表数据
const getList = () => {
    const params = {
        ...formInline.value,
        pageNo: page.currentPage,
        pageSize: page.pageSize
    }
    post(constant.ieopActivity + '/activity/template/type/page/get',params).then((res) => {
        const { code, data } = res.data
        if (code == '200') {
            tableData.value = data.records
            page.pageSize = data.perPageSize
            page.total = Number(data.total)
            page.currentPage = data.currentPageNum
        }
    })
}
getList()
// 重置
const onReset = () => {
    formInline.value.templateTypeName = ''
    formInline.value.templateTypeCode = ''
    page.pageSize = 10
    page.currentPage = 1
    getList()
}
// 删除
const onDelete = (id: any) => {
    ElMessageBox.confirm('此操作将删除该活动类型分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const params = {
            id: id
        }
        post(constant.ieopActivity + '/activity/template/type/delete', params).then((res) => {
            const { code } = res.data
            if (code == '200') {
                ElMessage.success('删除成功!')
                getList()
            }
        })
    }).catch(() => {
        ElMessage.error('取消删除!')
    })
}
//分页跳转查询
const hanleCurrentChange = (val: any) => {
    page.currentPage = val
    getList()
}
const handleSizeChange = (val: any) => {
    page.pageSize = val
    getList()
}
</script>
<style lang="scss" scoped>
.content {
    margin-top: 20px;
    width: 100%;
    .text-btn {
        font-size: 12px;
        color: #409EFF;
        margin-left: 6px;
        cursor: pointer;
    }
    .del-btn {
        font-size: 12px;
        color: #F56C6C;
        margin-left: 6px;
        cursor: pointer;
    }
    .el-button {
        float: right;
        margin: 0 0 10px 10px;
    }
    .left {
        padding-left: 16px;
        .el-table {
            margin: 20px 0;
        }
        .ser-box {
            margin: 20px 10px -20px 0px;
            .el-input {
                width: 300px;
            }
            .el-button {
                margin-top: 10px;
                margin-left: -10px;
                margin-right: 20px;
            }
        }
    }
    .pagin-bottom {
        margin-top: 20px;
    }
}
</style>

2、弹框组件页面-新增/编辑

DialogType.vue

<!--
@Description 申请表管理 - 活动类型管理 - 新增/编辑活动类型弹框
@author wdd
@date 2024/3/22
-->
<template>
    <div>
        <el-dialog :title="titleText" v-model="dialogVisible" :close-on-press-escape="false"
            :close-on-click-modal="false" width="36%">
            <div style="padding-right:40px">
                <el-form label-width="140px" ref="formRef" :model="formInline">
                    <el-form-item label="活动类型名称:" :prop="formInline.prop"  :rules="{
                      required: true,
                      message: '请输入',
                      trigger: ['blur','change'],
                    }">
                        <el-input v-model="formInline.templateTypeName"></el-input>
                    </el-form-item>
                    <el-form-item label="活动类型编码:" prop="templateTypeCode" :rules="{
                      required: true,
                      message: '请输入',
                      trigger: ['blur','change'],
                    }">
                        <el-input v-model="formInline.templateTypeCode"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span slot="footer" class="dialog-footer">
                    <el-button link type="primary" @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirm()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, defineEmits, computed, watch, inject } from 'vue';
import { post } from "@/utils/path.js";
import { ElLoading, ElMessage } from "element-plus";
const formRef = ref()
const dataObj = ref()
const titleText = ref('')
const constant = inject('constant')
const verification = inject('verification');
const message = inject('message')
const formInline = ref({
    // templateTypeName: '',
    // templateTypeCode: '',
})
const props = defineProps({
    infoData: {
        default: null,
        type: Object,
    },
    dialogVisible: {
        type: Boolean,
        default() {
            return false
        },
    },
})
//监听方法
const emit = defineEmits(['emit-confirm', 'update:dialogVisible'])
const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val),
})
watch(
    () => props.dialogVisible,
    (newVal) => {
        if (newVal) {
            dataObj.value = JSON.parse(JSON.stringify(props.infoData))
            if (dataObj.value.typeName == 'add') {
                titleText.value = '新增'
            }
            if (dataObj.value.typeName == 'edit') {
                formInline.value = { ...dataObj.value }
                formInline.value.id = dataObj.value.id
                titleText.value = '编辑'
            }
        }
    },
    { immediate: true }
)
const confirm = async () => {
    await formRef.value.validate((valid: any) => {
        var msg1 = verification.checkParam('活动类型名称', formInline.value.templateTypeName, false, 50);
        if (msg1 != null) {
            message.error(msg1)
            return
        }
        var msg2 = verification.checkParam('活动类型编码', formInline.value.templateTypeCode, false, 50);
        if (msg2 != null) {
            message.error(msg2)
            return
        }
        if (!valid) {
            return
        } else {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            const params = {
                templateTypeName: formInline.value.templateTypeName,
                templateTypeCode: formInline.value.templateTypeCode,
            }
            if (dataObj.value.typeName == 'edit') {
                params.id = formInline.value.id
            }
            const require = dataObj.value.typeName == 'edit' ? post(constant.ieopActivity + '/activity/template/type/update', params) : post(constant.ieopActivity + '/activity/template/type/add', params)
            require.then((res) => {
                const { code } = res.data
                if (code == '200') {
                    loading.close()
                    ElMessage.success(dataObj.value.typeName == 'edit' ? '修改成功' : '新增成功')
                    emit('update:dialogVisible', false)
                    formInline.value = {}
                    emit('emit-confirm')
                } else {
                    loading.close()
                    ElMessage.error(res.message)
                    emit('update:dialogVisible', false)
                }
            })
                .catch(() => {
                    loading.close()
                })
        }
    })
}
</script>

3、公共标题组件

3.1、组件页面

src\components\centerHead\centerHead.vue

<template>
  <div id="centerHead">
    <div class="infoTitle">
      <div class="smallGreen"></div>
      <div class="title" style="font-size: 16px">{{title}}</div>
    </div>
  </div>

</template>

<script>
  export default{
    props: {
      title: {
        type: String
      }
    },
    data(){
      return {
      }
    },
  }
</script>

<style lang="scss">
  #centerHead{
    .infoTitle {
      height: 49px;
      width: 100%;
      background: rgba(67,133,244,0.14) !important;
      border-bottom: 1px solid #E6E6E6;
      border-radius: 5px;
      .smallGreen {
        width: 4px;
        height: 100%;
        background-color: rgba(67,133,244,1);
        float: left;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
      }
      .title {
        font-size: 16px;
        line-height: 49px;
        margin-left: 15px;
        float: left;
        font-weight: 600 !important;
        color: #333333;
      }
    }
  }
</style>

2、注册组件

src/main.ts

import { createApp, ref } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.component('centerHead', centerHead);
import centerHead from "./components/centerHead/centerHead.vue";