element-ui快速实现增删改查

cool-admin，是一个开源免费的前后端分离的后台管理系统开发框架。基于element-ui，midway，mysql构建。支持serverless、docker、自建服务器等方式部署。

CRUD效果

技术栈

• cool-admin
• element-ui
• vue.js

文档

cool-admin开发文档

代码

<template>
    <cl-crud ref="crud" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table v-bind="table"></cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
    </cl-crud>
</template>

<script>
    export default {
        data() {
            return {
                // 新增、编辑配置
                upsert: {
                    items: []
                },
                // 表格配置
                table: {
                    columns: []
                }
            };
        },
        methods: {
            onLoad({ ctx, app }) {
                // crud 配置
                ctx.service().done();
                // 发送 page 接口请求
                app.refresh();
            }
        }
    };
</script>

新增|编辑

{
    upsert: {
        items: [
            {
                label: "昵称",
                prop: "name",
                // 参数与 el-form-item 一致
                props: {},
                value: "神仙都没用", // 昵称默认值
                // 渲染参数，支持 slot, 组件实例，jsx
                component: {
                    name: "el-input", // 可以是任意已注册的组件名
                    props: {}, // 组件的参数
                    on: {} // 组件的回调事件
                },
                // 验证规则，与 el-form 一致
                rules: {
                    required: true,
                    message: "昵称不呢为空"
                }
            },
            {
                label: "存款",
                prop: "price",
                component: {
                    name: "el-input-number",
                    props: {
                        min: 0,
                        max: 10000
                    }
                }
            },
            {
                label: "状态",
                prop: "status",
                value: 1,
                component: {
                    name: "el-radio-group",
                    options: [
                        {
                            label: "启用",
                            value: 1
                        },
                        {
                            label: "禁用",
                            value: 0
                        }
                    ]
                }
            }
        ];
    }
}