vue 3 + element UI 表格分页及增删查改

使用vue版本：vue@3.2.37

使用element-plus版本：element-plus@2.2.12

使用axios版本：axios@0.21.1

引用了如下脚本：

<script src="~/lib/vue/vue.global.min.js"></script>

<link href="~/lib/element-plus2/index.min.css" rel="stylesheet" />

<link href="~/lib/element-plus2/theme-chalk/index.min.css" rel="stylesheet" />
<script src="~/lib/element-plus2/index.full.js"></script>
<script src="~/lib/element-plus2/locale/en.js"></script>
<script src="~/lib/element-plus2/locale/zh-cn.js"></script>
<script src="~/lib/element-plus2/icons-vue/dist/global.iife.min.js"></script>
<script src="~/lib/axios/axios.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
效果如图：

 

 

代码如下：

<div id="app" v-cloak>
    <el-row type="flex" :gutter="10">
        <el-col :span="4">
            <el-input placeholder="DictionaryName" v-model="dataDictionaryName" size="mini" clearable></el-input>
        </el-col>
        <el-col :span="6">
            <el-select v-model="DataDictionaryTypeId" placeholder="please select">
                <el-option key="0" label="All" value="0">
                </el-option>
                <el-option v-for="item in dataDictionaryTypeList"
                           :key="item.dataDictionaryTypeId"
                           :label="item.dictionaryTypeName"
                           :value="item.dataDictionaryTypeId">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="2" style="text-align:right">
            <el-button type="primary" plain v-on:click="getDataDictionary(1)" size="mini" class="has-gutter">Search</el-button>
        </el-col>
    </el-row>
    <div style="width: 100%; margin-top: 10px;">
        <el-button type="primary" icon="Plus" plain circle v-on:click="addDataDictionary" class="has-gutter"></el-button>
        <el-button type="primary" icon="Delete" plain circle v-if="dataDictionaryData && dataDictionaryData?.length > 0" v-on:click="deleteDataDictionary" class="has-gutter"></el-button>
    </div>
    <el-row type="flex" :gutter="10">
        <el-table :data="dataDictionaryData" border size="mini" style="width: 100%; margin-top: 10px;" :header-cell-style="getRowClass" v-on:row-click="queryDataDictionaryById" @@selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="dataDictionaryId" width="55"></el-table-column>
            <el-table-column label="DictionaryName" prop="dictionaryName" width="200"></el-table-column>
            <el-table-column label="Dictionary Desc " prop="dictionaryDesc" align="center" width="200"></el-table-column>
            <el-table-column label="DataDictionary Type" prop="dataDictionaryType" align="center" width="200"></el-table-column>
            <el-table-column label="SequenceNo" prop="sequenceNo" align="center"></el-table-column>
        </el-table>
        <el-pagination v-show="isPage"
                       :hide-on-single-page="true"
                       v-on:current-change="handleCurrentChange"
                       :current-page="Page.currentPage"
                       :page-size="Page.pageSize"
                       :page-sizes="[10,15,20,30,50]"
                       layout="total,sizes,prev, pager, next,jumper"
                       :total="Page.totalCount"
                       style="float:right;margin:10px 20px 0 0;">
        </el-pagination>
    </el-row>

    <el-drawer title="Data Dictionary Info"
               v-model="DataDictionary_drawer"
               :direction="rtl"
               size="46%"
               :before-close="DataDictionaryHandleClose" destroy-on-close>
        <el-card class="box-card">
            <el-form :model="DataDictionaryInfo" ref="DataDictionaryInfo" label-width="180px">
                <el-row :gutter="20">
                    <el-form-item label="DictionaryName">
                        <el-input v-model="DataDictionaryInfo.dictionaryName" placeholder="Please input" type="text" />
                    </el-form-item>

                    <el-form-item label="Dictionary Desc">
                        <el-input v-model="DataDictionaryInfo.dictionaryDesc" placeholder="Please input" type="text" />
                    </el-form-item>

                    <el-form-item label="Dictionary Type">
                        <el-select v-model="DataDictionaryInfo.dataDictionaryTypeId" placeholder="please select">
                            <el-option v-for="item in dataDictionaryTypeList"
                                       :key="item.dataDictionaryTypeId"
                                       :label="item.dictionaryTypeName"
                                       :value="item.dataDictionaryTypeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="SequenceNo">
                        <el-input-number v-model="DataDictionaryInfo.sequenceNo" :min="1" :max="9999" />
                    </el-form-item>
                </el-row>
                <el-button type="primary" @@click="DataDictionarySave">Save</el-button>
                <el-button type="primary" @@click="resetDataDictionaryForm">Reset</el-button>
                <el-row :gutter="20">
                </el-row>
            </el-form>
        </el-card>
    </el-drawer>
</div>

<script>
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    const loadOptions = {
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0)',
        fullscreen: true,
    }

    const Main = {
        data() {
            return {
                dataDictionaryTypeList:@(Json.Serialize(ViewBag.DataDictionaryTypeList)),
                dataDictionaryData: [],
                isPage: true,
                DataDictionary_drawer: false,
                isDisabled: false,
                Page: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 0
                },
                DataDictionaryInfo: {
                    dataDictionaryId:"",
                    dataDictionaryTypeId: "",
                    dictionaryName: "",
                    dictionaryDesc: "",
                    sequenceNo: "",
                },
                dataDictionaryName: '',
                DataDictionaryTypeId:'',                
                params: {
                    PageIndex: 1,
                    PageSize: 0,
                    DictionaryName: this.dataDictionaryName,
                    DataDictionaryType: this.DataDictionaryTypeId,
                },
                multipleSelectionData: [],
            }
        },
        created() {
            this.handleCurrentChange(1);
        },
        methods: {
            //多选内容更新
            handleSelectionChange(val) {
                this.multipleSelectionData.value = val;
            },
            //清空内容
            resetDataDictionaryForm() {
                this.DataDictionaryInfo = {};
                this.$refs['DataDictionaryInfo'].resetFields();
            },
            //保存
            DataDictionarySave() {
                this.$refs['DataDictionaryInfo'].validate((valid) => {
                    const loading = this.$loading(loadOptions);
                    if (valid) {
                        axios({
                            method: 'post',
                            url: '/DataDictionary/DataDictionaryEdit',
                            responseType: 'application/json',
                            params: this.DataDictionaryInfo
                        }).then(response => {
                            if (response.data) {
                                this.showMessage(response.data.code, response.data.message,false);
                                if (response.data.code == 200) {
                                    this.handleCurrentChange(1);
                                    this.DataDictionary_drawer = false;
                                    this.DataDictionaryHandleClose();
                                }
                            }
                        })
                        .catch(function (error) {
                            loading.close()
                        })
                        .finally(() => {
                            loading.close()
                        });
                    }
                });
            },
            //打开窗口新增
            addDataDictionary() {
                this.DataDictionary_drawer = true;
                this.isDisabled = true;
            },
            //删除数据
            deleteDataDictionary() {
                if (!this.multipleSelectionData || !this.multipleSelectionData.value || this.multipleSelectionData.value.length == 0) {
                    this.$message.warning("please select data!");
                    return false;
                }
                this.$confirm('Are you sure you want to delete the data??', 'tips', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/DataDictionary/DeleteDataDictionaryById',
                        responseType: 'json',
                        data: this.multipleSelectionData.value
                    }).then(response => {
                        if (response.data) {
                            this.handleCurrentChange(1);
                        }
                    }).catch(error => {
                    });
                }).catch(() => {
                });
            },
            //查询内容
            queryDataDictionaryById(row) {
                if (row.dataDictionaryId) {
                    axios({
                        method: 'post',
                        url: '/DataDictionary/QueryDataDictionaryById',
                        responseType: 'json',
                        params: {
                            DictionaryId: row.dataDictionaryId
                        }
                    }).then(response => {
                        if (response.data) {
                            this.DataDictionaryInfo = response.data;
                            this.DataDictionary_drawer = true;
                            this.isDisabled = true;
                        }
                    }).catch(error => {
                        loading.close()
                    });
                }
            },
            //关闭窗口
            DataDictionaryHandleClose(done) {
                this.resetDataDictionaryForm();
                this.isDisabled = false;
                done();
            },
            //获取列头样式
            getRowClass({ row, column, rowIndex, columnIndex }) {
                let style = {};
                if (rowIndex === 0) {
                    style = {
                        backgroundColor: '#7E8796',
                        color: '#fff',
                        fontWeight: 'bold'
                    };
                }
                else
                    style = {};
                return style;
            },
            //分页
            handleCurrentChange(pageNo) {
                this.getDataDictionary(pageNo)
            },
            getDataDictionary(pageNo) {
                const loading = this.$loading(loadOptions);
                this.isPage = true;
                this.Page.currentPage = pageNo;
                axios({
                    method: 'post',
                    url: '/DataDictionary/QueryDataDictionary',
                    responseType: 'json',
                    params: {
                        PageIndex: pageNo,
                        PageSize: this.Page.pageSize,
                        DictionaryName: this.dataDictionaryName,
                        DataDictionaryType: this.DataDictionaryTypeId,
                    }
                }).then(response => {
                    if (response.data) {
                        this.Page.totalCount= response.data.totalRows;
                        this.dataDictionaryData = response.data.data;
                    }
                })
                .catch(error => {
                    loading.close()
                });
                loading.close()
            },
            //显示操作提示信息
            showMessage(msgCode, msgContent, showColse = true) {
                var msgType = '';
                switch (msgCode) {
                    case 200:
                        msgType = 'success';
                        if (msgContent == undefined || msgContent == "")
                            msgContent = 'Operation Successfully.';
                        break;
                    case 404:
                        if (msgContent == undefined || msgContent == "")
                            msgContent= 'Operation Failed.';
                        msgType = 'error';
                        break;
                    default:
                        if (msgContent == undefined || msgContent == "")
                            msgContent = 'Form data submission error '
                        msgType = 'error';
                }
                this.$message({
                    showClose: showColse,
                    message: msgContent,
                    type: msgType
                });
            },
        }
    };

    const app = Vue.createApp(Main);
    app.use(ElementPlus)
    var Icons = Object.entries(ElementPlusIconsVue).filter((item) => { return ["Plus", "Delete"].includes(item[0]) })
    for (const [key, component] of Icons) {
        app.component(key, component)
    }
    app.mount("#app");
</script>
<style>
    .col2 {
        width: 100%;
        flex: 1;
        padding: 10px;
        border: solid 1px #eee;
        border-radius: 5px;
        float: left;
        margin-top: 10px;
    }
</style>