2月18日 添加数据
制作基本工具栏组件
<template>
<div class="mine-toolbar">
<el-button
type="success"
style="vertical-align:middle;margin-right:20px;"
icon="el-icon-plus"
round
plain
@click="$emit('add')"
>添加</el-button>
<el-input
v-model="keyword"
placeholder="请输入查询关键字"
@keydown.13.native="$emit('search',keyword)"
style="width:300px;vertical-align:middle;margin-right:20px"
>
<template v-slot:append>
<el-button
type="primary"
icon="el-icon-search"
@click="$emit('search',keyword)">搜索</el-button>
</template>
</el-input>
<el-button
style="vertical-align:middle"
type="primary"
round
plain
icon="el-icon-refresh"
@click="$emit('refresh')"
>刷新</el-button>
</div>
</template>
<script>
export default {
data() {
return {
keyword: ""
};
}
};
</script>
<style lang="less">
.mine-toolbar {
padding: 5px;
}
</style>使用：
<basic-toolbar @add="onAdd" @search="onSearch" @refresh="onRefresh"></basic-toolbar>对话框组件
<template>
<el-dialog :title="title" :visible.sync="visiable" width="30%">
<el-form :model="form" label-width="80px" >
<el-form-item label="登录名" prop="LoginName">
<el-input v-model="form.LoginName"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
title: "标题",
visiable: true,
form: {
LoginName: "asdfsdf"
}
};
}
};
</script>表单中的数据验证
要使用数据验证功能，有几个条件要满足：
1. el-form上要绑定要验证的数据
通过:model绑定要验证的数据
:model="form"2. el-form-item上要指定需要验证的字段
prop="LoginName"3. 指定验证规则
3.1. el-form上指定整个表单的验证规则
:rules="rules" rules:{
LoginName:[
{required:true,message:'登录名必填'},
{pattern:/^[a-zA-Z0-9_-]{4,16}$/,message:'登录名4到16位（字母，数字，下划线，减号）'}
]
}3.1 完整代码
<template>
<el-dialog :title="title" :visible.sync="visiable" width="30%">
<el-form :model="form" label-width="80px" :rules="rules">
<el-form-item label="登录名" prop="LoginName">
<el-input v-model="form.LoginName"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
title: "标题",
visiable: true,
form: {
LoginName: "asdfsdf"
},
rules:{
LoginName:[
{required:true,message:'登录名必填'},
{pattern:/^[a-zA-Z0-9_-]{4,16}$/,message:'登录名4到16位（字母，数字，下划线，减号）'}
]
}
};
}
};
</script>3.2. el-form-item上指定整个表单的验证规则
:rules="rules.LoginName"3.2完整代码
<template>
<el-dialog :title="title" :visible.sync="visiable" width="30%">
<el-form :model="form" label-width="80px" >
<!-- 搬下来 -->
<el-form-item label="登录名" prop="LoginName" :rules="rules.LoginName">
<el-input v-model="form.LoginName"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
title: "标题",
visiable: true,
form: {
LoginName: "asdfsdf"
},
rules:{
LoginName:[
{required:true,message:'登录名必填'},
{pattern:/^[a-zA-Z0-9_-]{4,16}$/,message:'登录名4到16位（字母，数字，下划线，减号）'}
]
}
};
}
};
</script>点击确定按钮，手动验证表单是否全部正确
给表单添加一个ref属性，跟id的作用类似，用来方便我们从父组件中找到该组件对象。
this.$refs.表单ref属性名<template>
<el-dialog :title="title" :visible.sync="visiable" width="30%">
<el-form ref="f" :model="form" label-width="80px" >
<!-- 搬下来 -->
<el-form-item label="登录名" prop="LoginName" :rules="rules.LoginName">
<el-input v-model="form.LoginName"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click=" visiable= false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
title: "标题",
visiable: true,
form: {
LoginName: ""
},
rules:{
LoginName:[
{required:true,message:'登录名必填'},
{pattern:/^[a-zA-Z0-9_-]{4,16}$/,message:'登录名4到16位（字母，数字，下划线，减号）'}
]
}
};
},
methods:{
ok(){
//取到表单组件对象
console.log(this.$refs.f)
//手动触发验证
this.$refs.f.validate((res)=>{
console.log(res) //res 如果为true，表示整个表单验证都通过
})
}
}
};
</script>添加数据
methods: {
ok() {
//手动触发验证
this.$refs.f.validate(res => {
//console.log(res) //res 如果为true，表示整个表单验证都通过
if (res == true) {
axios
.post("/api/admin/add", {
loginname: this.form.LoginName
})
.then(r => {
if (r.data.success) {
//关闭对话框
this.visiable = false;
//通知刷新
this.$emit('refresh');
}
this.$message({
message: r.data.message,
type: r.data.success ? "success" : "error"
});
});
}
});
}
}admin-dialog组件现在就可以监听refresh了，如果我们的用户添加完毕，会触发该事件。
<admin-dialog ref="x" @refresh="onRefresh"></admin-dialog>工具栏按钮的功能
<template>
<div>
<basic-toolbar @add="onAdd" @search="onSearch" @refresh="onRefresh"></basic-toolbar>
<admin-table ref="t"></admin-table>
<admin-dialog ref="x" @refresh="onRefresh"></admin-dialog>
</div>
</template>
<script>
import basicToolbar from './common/basicToolbar'
import adminTable from './admin/adminTable';
import adminDialog from './admin/adminDialog'
export default {
components: {
adminTable,
basicToolbar,
adminDialog
},
methods: {
onAdd(){
this.$refs.x.openDialog();
},
onSearch(e){
this.$refs.t.loadData(e)
},
onRefresh(){
this.$refs.t.loadData()
}
}
}
</script>adminTable 的加载数据：
loadData(e) {
if(e!=undefined){
this.keyword=e;
}
axios.get("/api/admin/get",{
params:{
keyword:this.keyword
}
}).then(res => {
this.list = res.data.rows;
});
}adminDialog:
openDialog(){
this.visiable=true;
//在界面更新后触发
//此处必须使用该方式，保证我们可以取到f
this.$nextTick(()=>{
this.$refs.f.resetFields();
})
},
