1，父组件
<template>
<div class="content">
<div class="nav between">
<div class="flex-row">
<div class='name-view'>
<span class="name">名称</span>
<el-select v-model="value" clearable placeholder="请选择" @change='selectedNameChange'>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="name-view view-margin-left">
<span class="name">活动名称</span>
<el-input v-model="activityName"></el-input>
</div>
</div>
<div class="flex-row">
<el-button type="primary" size='mini' icon="el-icon-search">查询</el-button>
<el-button size='mini' icon="el-icon-refresh-left" @click='activityName=""'>重置</el-button>
</div>
</div>
<div class="content-box">
<div class="flex-row content-btn-view">
<el-button type="primary" size='mini' icon="el-icon-plus" @click='addOrUpdate(null)'>新增</el-button>
<el-button type="danger" size='mini' icon="el-icon-delete">删除</el-button>
<el-button type="primary" size='mini'>其他按钮</el-button>
</div>
<div class="table-view">
<el-table
ref="multipleTable"
:data="tableData"
border
align='center'
height="calc(100vh - 215px)"
:highlight-current-row="true"
style="width: 100%"
:header-cell-style="{background:'#eee',color:'#303030'}"
@selection-change="handleSelectionChange">
<el-table-column
fixed
type="selection"
width="55">
</el-table-column>
<el-table-column
fixed
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
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="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
prop="phone"
label="手机号"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="180">
<template slot-scope="scope">
<el-button type="text" size="small" @click.native.prevent='addOrUpdate(scope.row.id)'>修改</el-button>
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text" size="small">删除
</el-button>
<el-button type="text" size="small">其他按钮</el-button>
</template>
</el-table-column>
</el-table>
<div class="content-btn-view flex-end">
<el-pagination
@size-change="handlePageSizeChange"
@current-change="handlePageChange"
:current-page="page"
:page-sizes="[15, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="100">
</el-pagination>
</div>
</div>
</div>
<!-- 修改弹框 -->
<add-or-update ref="addOrUpdateDialog"></add-or-update>
</div>
</template>
<script>
import addOrUpdate from './add-or-update.vue';
export default{
components: {
addOrUpdate
},
data(){
return{
id:null,
activityName:'',
page: 1,
pageSize:20,
options: [{
id:'1',
label: '黄金糕'
}, {
id:'2',
label: '双皮奶'
}, {
id:'3',
label: '蚵仔煎'
}, {
id:'4',
label: '龙须面'
}, {
id:'5',
label: '北京烤鸭'
}],
value:'',
tableData: [{
id:'111',
date: '2016-05-03',
name: '王小虎1',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
}, {
id:'222',
date: '2016-05-02',
name: '王小虎2',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
}, {
id:'333',
date: '2016-05-04',
name: '王小虎3',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
}, {
id:'444',
date: '2016-05-01',
name: '王小虎4',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
}, {
id:'555',
date: '2016-05-08',
name: '王小虎5',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
},
{
id:'666',
date: '2016-05-06',
name: '王小虎6',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
}, {
id:'777',
date: '2016-05-07',
name: '王小虎7',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789'
},
{
id:'888',
date: '2016-05-06',
name: '王小虎8',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'12345678999999'
}, {
id:'999',
date: '2016-05-07',
name: '王小虎9',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
phone:'123456789999999999999999'
}],
multipleSelection: []
}
},
methods:{
selectedNameChange(e){
console.log('==',e)
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handlePageSizeChange(pageSize) {
this.pageSize = pageSize
},
handlePageChange(page) {
this.page = page
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
addOrUpdate(id){
this.$nextTick(() => {
this.$refs.addOrUpdateDialog.init(id)
})
},
}
}
</script>
<style scoped>
.content{
width: 100%;
height: calc(100vh - 47px);
}
.name-view{
font-size: 14px;
}
.name{
font-weight: 600;
margin-right: 5px;
color: #303030;
}
.view-margin-left{
margin-left: 20px;
}
.content-box{
margin: 10px 0 0 10px;
background-color: #fff;
border-radius: 6px;
}
.content-btn-view{
height: 42px;
line-height: 42px;
margin: 5px 10px;
}
.table-view{
margin: 5px 10px 0 5px;
}
.flex-end{
display: flex;
justify-content: flex-end;
}
</style>
2，子组件
<template>
<div>
<el-dialog :title="formData.id?'修改':'新增'"
:close-on-click-modal='false'
:close-on-press-escape='false'
:visible.sync="dialogFormVisible"
>
<!-- model绑定的值 -->
<el-form :model="formData" ref="dataForm" :rules="formRules">
<el-form-item prop="name" label="姓名" label-width="80px">
<el-input type='text' v-model="formData.name" autocomplete="off" style="width: 43%;"></el-input>
</el-form-item>
<el-form-item prop="address" label="详细地址" label-width="80px">
<el-input type='text' v-model="formData.address" autocomplete="off" style="width: 80%;"></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
props:{},
data(){
return{
dialogFormVisible: false,
formData: {
id:null,
name: '',
address: '',
},
name:'',
formRules:{
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6个字符', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
],
}
}
},
methods:{
init(id){
this.dialogFormVisible = true
this.formData.id=null
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
if(id){
this.formData.id = id
console.log('请求该条修改数据的详情接口')
}
console.log('===>',this.formData)
},
submitForm(){
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.formData.id) {
console.log('提交--修改表单data')
this.dialogFormVisible = false
} else {
console.log('提交--新增表单data')
this.dialogFormVisible = false
}
}
})
}
}
}
</script>
<style scoped>
</style>
2090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
