在我们进行项目开发期间，避免不了使用各式各样的组件，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 增删改查+打包的资料请关注其它相关文章！
© 版权声明
THE END
暂无评论内容