在我們進行項目開發期間，避免不了使用各式各樣的組件，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 /> <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='操作' 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' @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 :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 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-itemprop='dates' // 需要驗證的字段 需要對應rules里面的鍵label='日期':label- :rules='[ {required: true, message: ’必須選擇一個日期’, trigger: ’blur’},]' // 也可以直接寫在item里面驗證 也可以全放在rules。我這里是采取了兩種方式 > <el-date-picker v-model='form.dates' 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 增刪改查+打包的資料請關注好吧啦網其它相關文章！