Vue使用Element实现增删改查+打包

简介: Vue使用Element实现增删改查+打包

在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

效果:

组件使用

我们利用vue-cli创建一个项目,然后只需要安装element-ui即可

安装:npm i element-ui -S

然后在main.js中引用一下样式即可,可以选择按需加载,我们这边因为是演示一下,所以不去进行调整,项目中如果使用到的组件不多,可以选择按需加载。

  • main.js
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')

然后我们在src/components下新建一个组件,用来写我们的展示组件,然后在app.vue中导入即可

  • app.vue
<template>
  <div id="app">
    <Creator content1="憧憬"/>
  </div>
</template>
<script>
import Creator from './components/Creator/Creator';
export default {
  name: 'app',
  components: {
    Creator
  }
}
</script>

我们首先先使用表格,将数据展示出来

  • Creator.vue
<template>
    <div class="Creator">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input v-model="content" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary">搜索</el-button>
            </el-col>
        </el-row>
        <div style="height: 20px"/>
        <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="14">
                <el-table
                        :data="tableData"       // 声明列表使用的数据
                        :key="'zip'"            // 声明每一行的key
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="name"         // 对应tableData里面的需要展示的键
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="160"
                            v-slot="scope"  // 获取每一行的数据
                     >
                        <template>       
                            <el-button @click="handleCreate(scope.row)"     type="text" size="small">添加</el-button>
                            <el-popconfirm
                                    confirmButtonText='好的'
                                    cancelButtonText='不用了'
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="这是一段内容确定删除吗?"
                                    @onConfirm="handleDelete(scope.row)"
                            >
                                <el-button slot="reference" type="text" size="small">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        // rules指定表单验证规则
            <el-form :model="form" status-icon ref="ruleForm" :rules="rules" :label-position="'right'">
                <el-row :gutter="10">
                    <el-col :span="11">
                        <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
                            <el-input style="width: 200px" v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="11">
                        <el-form-item
                                prop="dates"    // 需要验证的字段 需要对应rules里面的键
                                label="日期"
                                :label-width="formLabelWidth"
                                :rules="[
                                    {required: true, message: '必须选择一个日期', trigger: 'blur'},
                                ]"          // 也可以直接写在item里面验证 也可以全放在rules。我这里是采取了两种方式
                        >
                            <el-date-picker
                                    v-model="form.dates"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日" // 展示数据的格式
                                    value-format="yyyy-MM-dd"       // 声明点击后的数据格式
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: {
            content1: {required: true, type: String}
        },
        data() {
            // 自定义验证函数 给name验证
            const validatName = (rule, value, callback) => {
                if (!value) return callback(new Error('名字不能为空'));
                if (value.length <= 0) return callback(new Error('最少一个字符'));
                return callback();
            };
            return {
                content: this.content1,
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200331
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1517 弄',
                        zip: 200332
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1519 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1516 弄',
                        zip: 200334
                    }],
                formLabelWidth: '120px',
                // 控制模态是否展示
                dialogFormVisible: false,
                form: {
                    name: '',
                    dates: null,
                },
                // 对picker组件的扩展
                pickerOptions: {
                    // 将之后的时间禁用 不然选择
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    // 增加 今天 昨天 一周前的快速选项
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                // 定义输入规则
                rules: {
                    name: [
                            // 指定验证函数             触发时机。这个是失去焦点触发
                        {validator: validatName, trigger: 'blur'}
                    ],
                },
            };
        },
        methods: {
            onOk() {
                // 使用ref进行验证 validate传入一个函数 返回一个验证是否成功的bool值
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        const {
                            name,
                            dates
                        } = this.form;
                    // 避免zip重复 zip++
                        const maxZip = Math.max(...this.tableData.map(item => item.zip)) + 1;
                        const obj = {
                            name,
                            date: dates,
                            province: '北京',
                            city: '普陀区',
                            address: '上海市普陀区金沙江路 1518 弄',
                            zip: maxZip
                        };
                // push到数据里面
                        this.tableData.push(obj);
                // 将模态隐藏
                        this.dialogFormVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            // 删除数据
            handleDelete(row) {
                this.tableData.map((item, index) => {
                    if (item.zip === row.zip) {
                        this.tableData.splice(index, 1);
                    }
                });
            },
            handleCreate() {
                // 模态展示
                this.dialogFormVisible = true;
            }
        }
    };
</script>

一套基本的增删改查就可以了呀,Vue有一套admin模版,开箱即用。

vue-element-admin非常不错,大家可以去使用一下子

打包

默认打包的话会导致静态资源引用存在问题,打开一片空白,所以我们打包前需要先配置一下静态资源

package.json这个文件同级的目录,新建一个vue.config.js,加入如下配置

/**
 *  Created By 憧憬
 */
module.exports = {
    publicPath: './'        // 静态资源目录配置为./ 当前目录
};
目录
相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
11天前
|
JavaScript
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
26 6
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
32 4
|
13天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
25 1
|
13天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
35 1
|
13天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
50 0
|
13天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
20 0