一、搜索和新增行内表单实现
image.png
1.userManage.vue中
image.png
- CommonForm.vue子组件中
<template>
<el-form :inline="inline" :model="form" ref="form" label-width="100px">
<el-form-item v-for="item in formLabel" :key="item.model">
<el-input v-model="form[item.model]" :placeholder="'请输入'+ item.label" v-if="!item.type" ></el-input>
<el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type === 'select'">
<el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-switch v-model="form[item.model]" v-if="item.type === 'switch'"></el-switch>
</el-form-item>
<el-form-item>
<slot></slot>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
inline: Boolean,
form: Object,
formLabel: Array
}
}
</script>
<style lang="scss" scoped>
</style>
3.Common.scss样式
.manage{
height: 90%;
padding-bottom: 20px;
overflow: hidden;
&-header{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
}
二、表格封装
1.userManage.vue
<template>
<div class="manage">
<div class="manage-header">
<el-button type='primary'>+ 新增</el-button>
<CommonForm inline :formLabel="formLabel" :form="searchForm">
<el-button type="primary">搜索</el-button>
</CommonForm>
</div>
<CommonTable :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()"></CommonTable>
</div>
</template>
<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {
components:{
CommonForm,
CommonTable,
},
data() {
return {
tableData:[],
tableLabel:[
{
prop: 'name',
label: '姓名',
},
{
prop: 'age',
label: '年龄',
},
{
prop: 'sexLabel',
label: '性别',
},
{
prop: 'birth',
label: '出生日期',
},
{
prop: 'addr',
label: '地址',
},
],
config:{
page:1,
total:30,
loading: false
},
searchForm:{
keyword:''
},
formLabel:[
{
model: 'keyword',
label: '',
option: [],
}
]
}
},
methods: {
getList() {
//告诉用户加载中
this.config.loading = true
this.$http.get('/api/user/getUser',{
params :{
page:this.config.page
}
}).then(res =>{
this.tableData = res.data.list.map(item =>{
item.sexLabel = item.sex === 0 ? '女':'男'
return item
})
this.config.total = res.data.count
this.config.loading = false
})
},
},
created() {
this.getList()
},
}
</script>
<style lang="scss" scoped>
@import '../../assets/scss/common.scss';
</style>
2.CommonTable.vue
<template>
<div class="common-table">
<!--局部加载显示v-loading-->
<el-table :data="tableData" height="90%" stripe v-loading="config.loading">
<el-table-column label="序号" width="85">
<template slot-scope="scope">
<span style="margin-left: 10px">{{(config.page - 1) * 20 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!--循环出来的列-->
<el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--sync父组件-->
<el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage"></el-pagination>
</div>
</template>
<script>
export default {
props: {
tableData: Array,
tableLabel: Array,
config:Object
},
methods: {
handleEdit(){
},
handleDelete(){
},
changePage(page){
//告诉父组件页数
this.$emit('changePage',page)
}
},
}
</script>
<style lang="scss" scoped>
.common-table {
height: calc(100% - 62px);
background-color: #fff;
position: relative;
.pager {
position: absolute;
bottom: 10px;
right: 20px;
}
}
</style>
三、页面功能实现，用户的修改和删除
image.png
image.png
1.UserManage.vue
<template>
<div class="manage">
<!--对话框-->
<el-dialog :title="operateType === 'add' ? '新增用户':'更新用户'" :visible.sync="isShow">
<CommonForm :formLabel="operateFormLabel" :form="operateForm"></CommonForm>
<div slot="footer" class="dialog-footer">
<el-button @click="isShow = false">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</el-dialog>
<div class="manage-header">
<el-button type='primary' @click="addUser">+ 新增</el-button>
<CommonForm inline :formLabel="formLabel" :form="searchForm">
<el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
</CommonForm>
</div>
<CommonTable :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()" @edit="editUser" @del="delUser"></CommonTable>
</div>
</template>
<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {
components:{
CommonForm,
CommonTable,
},
data() {
return {
isShow:false,
operateType:'add',
tableData:[],
tableLabel:[
{
prop: 'name',
label: '姓名',
},
{
prop: 'age',
label: '年龄',
},
{
prop: 'sexLabel',
label: '性别',
},
{
prop: 'birth',
label: '出生日期',
},
{
prop: 'addr',
label: '地址',
},
],
config:{
page:1,
total:30,
loading: false
},
operateForm:{
name:'',
addr:'',
age:'',
birth:'',
sex:'',
},
operateFormLabel:[
{
model:'name',
label:'姓名',
},
{
model:'age',
label:'年龄',
},
{
model:'sex',
label:'性别',
type: "select",
opts:[
{
label:'男',
value:'1'
},
{
label:'女',
value:'0'
},
]
},
{
model:'birth',
label:'出生日期',
type:'date'
},
{
model:'addr',
label:'地址',
},
],
searchForm:{
keyword:''
},
formLabel:[
{
model: 'keyword',
label: '',
option: [],
}
]
}
},
methods: {
getList(name = '') {
//告诉用户加载中
this.config.loading = true
this.$http.get('/api/user/getUser',{
params :{
page:this.config.page,
name
}
}).then(res =>{
this.tableData = res.data.list.map(item =>{
item.sexLabel = item.sex === 0 ? '女':'男'
return item
})
this.config.total = res.data.count
this.config.loading = false
})
},
addUser() {
this.operateForm = {}
this.operateType = 'add'
this.isShow = true
},
editUser(row){
this.operateType ='edit'
this.isShow = true
this.operateForm = row
},
confirm(){
if(this.operateType ==='edit'){
this.$http.post('/api/user/edit',this.operateForm).then(res=>{
console.log(res.data)
this.isShow =false
this.getList()
})
}else {
this.$http.post('/api/user/add', this.operateForm).then(res => {
console.log(res.data)
this.isShow = false
this.getList()
})
}
},
delUser(row){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
let id = row.id;
this.$http.get('/api/user/del',{
params:{
id
}
}).then(res=>{
console.log(res.data)
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList()
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
created() {
this.getList()
},
}
</script>
<style lang="scss" scoped>
@import '../../assets/scss/common.scss';
</style>
2.CommonTable.vue
<template>
<div class="common-table">
<!--局部加载显示v-loading-->
<el-table :data="tableData" height="90%" stripe v-loading="config.loading">
<el-table-column label="序号" width="85">
<template slot-scope="scope">
<span style="margin-left: 10px">{{(config.page - 1) * 20 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<!--循环出来的列-->
<el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--sync父组件-->
<el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage" :page-size="20"></el-pagination>
</div>
</template>
<script>
export default {
props: {
tableData: Array,
tableLabel: Array,
config:Object
},
methods: {
handleEdit(row){
this.$emit('edit',row)
},
handleDelete(row){
this.$emit('del',row)
},
changePage(page){
//告诉父组件页数
this.$emit('changePage',page)
}
},
}
</script>
<style lang="scss" scoped>
.common-table {
height: calc(100% - 62px);
background-color: #fff;
position: relative;
.pager {
position: absolute;
bottom: 10px;
right: 20px;
}
}
</style>
3.CommonForm
<template>
<el-form :inline="inline" :model="form" ref="form" label-width="100px">
<el-form-item v-for="item in formLabel" :key="item.model" :label="item.label">
<el-input v-model="form[item.model]" :placeholder="'请输入'+ item.label" v-if="!item.type"></el-input>
<el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type === 'select'">
<el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-switch v-model="form[item.model]" v-if="item.type === 'switch'"></el-switch>
<el-date-picker v-model="form[item.model]" type="date" placeholder="选择日期" v-if="item.type === 'date'" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<!--放置按钮-->
<el-form-item>
<slot></slot>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
inline: Boolean,
form: Object,
formLabel: Array
}
}
</script>
<style lang="scss" scoped>
</style>
网友评论