DDR爱好者之家 Design By 杰米
在我们进行项目开发期间,避免不了使用各式各样的组件,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: './' // 静态资源目录配置为./ 当前目录 };
以上就是Vue使用Element实现增删改查+打包的步骤的详细内容,更多关于vue 增删改查+打包的资料请关注其它相关文章!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]