Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟
更新時(shí)間：2020年11月25日 10:57:22 作者：憧憬
這篇文章主要介紹了Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
在我們進(jìn)行項(xiàng)目開發(fā)期間，避免不了使用各式各樣的組件，Element是由餓了么公司前端團(tuán)隊(duì)開源。樣式精美、組件齊全、易于上手。
效果：
組件使用
我們利用vue-cli創(chuàng)建一個(gè)項(xiàng)目，然后只需要安裝element-ui即可
安裝：npm i element-ui -S
然后在main.js中引用一下樣式即可，可以選擇按需加載，我們這邊因?yàn)槭茄菔疽幌?，所以不去進(jìn)行調(diào)整，項(xiàng)目中如果使用到的組件不多，可以選擇按需加載。
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')
然后我們?cè)?code>src/components下新建一個(gè)組件，用來寫我們的展示組件，然后在app.vue中導(dǎo)入即可
app.vue
<template>
<div id="app">
<Creator content1="憧憬"/>
</div>
</template>
<script>
import Creator from './components/Creator/Creator';
export default {
name: 'app',
components: {
Creator
}
}
</script>
我們首先先使用表格，將數(shù)據(jù)展示出來
Creator.vue
<template>
<div class="Creator">
<el-row :gutter="20">
<el-col :span="6">
<el-input v-model="content" placeholder="請(qǐng)輸入內(nèi)容"></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" // 聲明列表使用的數(shù)據(jù)
:key="'zip'" // 聲明每一行的key
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name" // 對(duì)應(yīng)tableData里面的需要展示的鍵
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市區(qū)"
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" // 獲取每一行的數(shù)據(jù)
>
<template>
<el-button @click="handleCreate(scope.row)" type="text" size="small">添加</el-button>
<el-popconfirm
confirmButtonText='好的'
cancelButtonText='不用了'
icon="el-icon-info"
iconColor="red"
title="這是一段內(nèi)容確定刪除嗎？"
@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指定表單驗(yàn)證規(guī)則
<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" // 需要驗(yàn)證的字段 需要對(duì)應(yīng)rules里面的鍵
label="日期"
:label-width="formLabelWidth"
:rules="[
{required: true, message: '必須選擇一個(gè)日期', trigger: 'blur'},
]" // 也可以直接寫在item里面驗(yàn)證 也可以全放在rules。我這里是采取了兩種方式
>
<el-date-picker
v-model="form.dates"
align="right"
type="date"
placeholder="選擇日期"
format="yyyy 年 MM 月 dd 日" // 展示數(shù)據(jù)的格式
value-format="yyyy-MM-dd" // 聲明點(diǎn)擊后的數(shù)據(jù)格式
: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() {
// 自定義驗(yàn)證函數(shù) 給name驗(yàn)證
const validatName = (rule, value, callback) => {
if (!value) return callback(new Error('名字不能為空'));
if (value.length <= 0) return callback(new Error('最少一個(gè)字符'));
return callback();
};
return {
content: this.content1,
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200331
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1517 弄',
zip: 200332
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1516 弄',
zip: 200334
}],
formLabelWidth: '120px',
// 控制模態(tài)是否展示
dialogFormVisible: false,
form: {
name: '',
dates: null,
},
// 對(duì)picker組件的擴(kuò)展
pickerOptions: {
// 將之后的時(shí)間禁用 不然選擇
disabledDate(time) {
return time.getTime() > Date.now();
},
// 增加 今天 昨天 一周前的快速選項(xiàng)
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);
}
}]
},
// 定義輸入規(guī)則
rules: {
name: [
// 指定驗(yàn)證函數(shù) 觸發(fā)時(shí)機(jī)。這個(gè)是失去焦點(diǎn)觸發(fā)
{validator: validatName, trigger: 'blur'}
],
},
};
},
methods: {
onOk() {
// 使用ref進(jìn)行驗(yàn)證 validate傳入一個(gè)函數(shù) 返回一個(gè)驗(yàn)證是否成功的bool值
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
const {
name,
dates
} = this.form;
// 避免zip重復(fù) zip++
const maxZip = Math.max(...this.tableData.map(item => item.zip)) + 1;
const obj = {
name,
date: dates,
province: '北京',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: maxZip
};
// push到數(shù)據(jù)里面
this.tableData.push(obj);
// 將模態(tài)隱藏
this.dialogFormVisible = false;
} else {
return false;
}
});
},
// 刪除數(shù)據(jù)
handleDelete(row) {
this.tableData.map((item, index) => {
if (item.zip === row.zip) {
this.tableData.splice(index, 1);
}
});
},
handleCreate() {
// 模態(tài)展示
this.dialogFormVisible = true;
}
}
};
</script>
一套基本的增刪改查就可以了呀，Vue有一套admin模版，開箱即用。
vue-element-admin非常不錯(cuò)，大家可以去使用一下子
打包
默認(rèn)打包的話會(huì)導(dǎo)致靜態(tài)資源引用存在問題，打開一片空白，所以我們打包前需要先配置一下靜態(tài)資源
在package.json這個(gè)文件同級(jí)的目錄，新建一個(gè)vue.config.js，加入如下配置
/**
* Created By 憧憬
*/
module.exports = {
publicPath: './' // 靜態(tài)資源目錄配置為./ 當(dāng)前目錄
};
以上就是Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue 增刪改查+打包的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在現(xiàn)代前端開發(fā)中,項(xiàng)目通常需要在不同的環(huán)境中運(yùn)行,例如開發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境,每個(gè)環(huán)境可能需要不同的配置,通過使用?.env?文件,可以方便地管理這些環(huán)境變量,避免硬編碼配置,本文給大家介紹了Vue3項(xiàng)目中env文件的配置指南,需要的朋友可以參考下2025-03-03
Vue與TypeScript的結(jié)合使得開發(fā)大型應(yīng)用變得更加容易和高效,本文將詳細(xì)探討Vue.js組件中TypeScript的應(yīng)用,特別是它的生命周期鉤子函數(shù),并通過豐富的示例,為你提供一個(gè)實(shí)戰(zhàn)指南,需要的朋友可以參考下2023-11-11
Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像上傳功能
這篇文章主要介紹了Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像圖片上傳,項(xiàng)目中是使用有贊vant-ui框架實(shí)現(xiàn)的頭像上傳替換功能，用到了封裝的圖片壓縮封裝之后再去上傳圖片this.$imgUpload.imgZip(），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來實(shí)現(xiàn)點(diǎn)擊下載,需要的朋友可以參考下2023-08-08
Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案
這篇文章主要介紹了vue項(xiàng)目element?UI?版本升級(jí)過程遇到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 3 自定義權(quán)限指令 v-action的作用
在實(shí)際的前端開發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權(quán)限動(dòng)態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識(shí),需要的朋友可以參考下2025-04-04
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼
這篇文章主要介紹了Vue 用Vant實(shí)現(xiàn)時(shí)間選擇器的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10