溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在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 />
<el-row :gutter="10" type="flex" justify="center">
<el-col :span="14">
<el-table
:data="tableData" // 聲明列表使用的數據
:key="'zip'" // 聲明每一行的key
border
>
<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 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實現一個增刪改查功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
