在實際應用中，每每須要一個報表列表頁，支持表單數據的添加或修改，操做完畢後關閉子頁並刷新列表頁面，效果以下圖vue
主頁面代碼關鍵代碼：ios
1）在主頁面引入待彈出modal頁的組件json
<productEditModal :show="{'showModal': showModal, 'productId': productId}" @on-close="closeModal" ></productEditModal>
<script> import productEditModal from '@/content/productEdit'// 數據源列表 export default { components: { productEditModal }, ... </script>
2）在主頁面中定義彈窗和關閉彈出的函數，其中，showModal、productId爲定義的變量，將會傳入彈出子頁，分別表明是否彈出頁和傳入到子頁面主鍵值axios
methods: { // 關閉彈框，賦值父頁面 closeModal (resVal) { console.log('子組件傳來的值：' + resVal) this.showModal = resVal.isClose if (resVal.isRefresh) { this.getList() } }, // 彈出頁面 openModal (index) { console.log('序列號：' + index) this.showModal = true this.productId = 0// 默認新增0 index > -1 && (this.productId = this.tbData[index].id) }, ... }
子頁面代碼關鍵代碼：api
1）定義modal頁面內容ide
<template> <Modal v-model="showModal" title="產品編輯" width="800" :footer-hide=true :closable="false" > <!--此處放置表單中的控件--> </Modal> </template>
2）子頁面在watch中接收父頁面傳來值並調用子頁數據加載方法函數
export default { // 父組件傳來的值 props: ['show', 'productId'], data () { // 這裏存放數據 return { showModal: false, curProduct: { id: 0, name: '', code: '', remark: '' }// 當前頁面的產品信息 } }, // 監聽屬性 相似於data概念 computed: {}, // 方法集合 methods: { // 關閉子頁面 onCancel (isRefresh) { this.showModal = false this.curProduct = { id: 0, name: '', code: '', remark: '' }// 初始化 this.$emit('on-close', { isclose: true, isRefresh: isRefresh }) }, ... init(productId){//缺省} }, // 獲取父頁面傳來的值，並根據主鍵id請求數據 watch: { show (validate) { console.log(validate) if (validate.showModal === true) { this.showModal = validate.showModal if (validate.productId > 0) { this.init(validate.productId) } else { this.curProduct = { id: 0, name: '', code: '', remark: '' }// 初始化 } } } }
3）子頁面重寫保存和關閉按鈕，隱藏modal的底部按鈕區（:footer-hide=true），自行控制彈出頁面的開關，請查看子頁完整代碼。工具
主頁完整代碼以下：post
<template>
<div class="main-content">
<Row type="flex">
<i-col span="2" class="main-lable"
> 產品名稱： </i-col>
<i-col span="6">
<i-input placeholder="請輸入產品名稱" style="width: 200px" v-model="proName"
></i-input>
</i-col>
<i-col span="8">
<Button type="info" icon="ios-search" @click="getList"
>查詢</Button>
<Button icon="ios-add" type="success" @click="openModal(-1)"
>新增</Button>
</i-col>
</Row>
<div style="margin-top:10px">
<Table border :columns="tbColumns" :data="tbData"
>
<template slot-scope="{ row, index }" slot="action"
>
<Button type="error" size="small" style="margin-right: 5px" @click="deleteRow(index)"
>刪除</Button>
<Button type="info" size="small" style="margin-right: 5px" @click="openModal(index)"
>編輯</Button>
</template>
</Table>
</div>
<div class="main-page">
<Page :total="totals" :page-size="pageSize" @on-change="change" show-elevator ></Page>
</div>
<productEditModal :show="{'showModal': showModal, 'productId': productId}" @on-close="closeModal"
></productEditModal>
</div>
</template>
<script> import productEditModal from '@/content/productEdit'// 數據源列表
export default { data () { return { self: this, proName: '', // 產品名稱（過濾項）
totals: 0, // 數據行數
pageSize: 10, // 每頁顯示條數
pageIndex: 1, // 當前頁
tbColumns: [ { title: '編號', width: 80, key: 'id' }, { title: '產品名稱', width: 150, key: 'name' }, { title: '產品代碼', width: 100, key: 'code' }, { title: '產品描述', key: 'remark' }, { title: '操做', slot: 'action', width: 200, align: 'center' } ], tbData: [], showModal: false, // 是否顯示子組件
productId: 0// 傳給子組件的主鍵id
} }, components: { productEditModal }, methods: { // 關閉彈框，賦值父頁面
closeModal (resVal) { console.log('子組件傳來的值：' + resVal) this.showModal = resVal.isClose if (resVal.isRefresh) { this.getList() } }, // 彈出頁面
openModal (index) { console.log('序列號：' + index) this.showModal = true
this.productId = 0// 默認新增0
index > -1 && (this.productId = this.tbData[index].id) }, // 刪除一條數據
deleteRow (index) { var that = this let proId = this.tbData[index].id if (proId > 0) { this.$Modal.confirm({ title: '提示', content: '確認要刪除名稱爲[' + this.tbData[index].name + ']的產品嗎？', onOk: () => { this.$axios .delete('/api/v1/product/' + proId) .then(response => { console.log(response) debugger
if (response.data.isError) { console.log(response) this.$Modal.error({ title: '提示', content: '刪除失敗！', onOk: () => { // this.$Message.info('Clicked ok')
}, onCancel: () => { // this.$Message.info('Clicked cancel')
} }) // this.$Message.error('新增失敗:' + response.data.message)
} else { this.$Modal.success({ title: '提示', content: '刪除成功！', onOk: () => { // this.$Message.info('Clicked ok')
// this.onCancel(true)
debugger that.getList() }, onCancel: () => { // this.$Message.info('Clicked cancel')
} }) } }) .catch(function (error) { // 請求失敗處理
console.log(error) }) }, onCancel: () => { this.$Message.info('您已取消刪除.') } }) } }, // 加載表格內容（含過濾、分頁）
getList () { // 拼裝請求數據
let filter = {} this.proName && (filter.name = { like: this.proName }) this.$axios .post('/api/v1/product/list', { filter: filter, sort: { id: 'ASC', name: 'DESC' }, page: this.pageIndex, limit: this.pageSize }) .then(response => { console.log(response) this.tbData = response.data.data.docs this.totals = response.data.data.totals // console.log(this.totals)
}) .catch(function (error) { // 請求失敗處理
console.log(error) }) }, // 分頁改變時
change (page) { // console.log(page)
this.pageIndex = page this.getList() } }, // 生命週期 - 掛載完成,template模板掛在到組件上（能夠訪問DOM元素）
mounted () { this.getList() } } </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> .main-content { height: 100%; } .main-lable { line-height: 30px; text-align: right; } .main-page { width: 100%; position: absolute; bottom: 2px; text-align: center; } </style>
子頁完整代碼以下：productEdit.vueflex
<template> <Modal v-model="showModal" title="產品編輯" width="800" :footer-hide=true :closable="false" > <i-form :label-width="100"> <div class="ivu-card ivu-card-dis-hover"> <div class="ivu-card-body" style="verflow-y:auto;overflow-x: hidden;" > <div class="ivu-row" style="margin-left: -12px; margin-right: -12px;" > <Row type="flex"> <i-col span="12"> <Form-item label="產品名稱：" prop="name" > <i-input v-model="curProduct.name" placeholder="請輸入產品名稱" style="width:80%" ></i-input> </Form-item> </i-col> <i-col span="12"> <Form-item label="產品代碼：" prop="code" > <i-input v-model="curProduct.code" placeholder="請輸入產品代碼" style="width:80%" ></i-input> </Form-item> </i-col> </Row> <Row type="flex"> <i-col span="24"> <Form-item label="數據源描述："> <Input type="textarea" :rows="4" placeholder="請輸入數據源描述" v-model="curProduct.remark" style="width:91%" /> </Form-item> </i-col> </Row> <div style="text-align: right;margin-top: 10px;"> <!-- <Button @click="onCancel()">取消</Button> --> <button type="button" class="ivu-btn ivu-btn-primary" @click="onSave" > <span>提交</span> </button> <button type="button" class="ivu-ml ivu-btn ivu-btn-default" @click="onCancel(false)" > <span>取消</span> </button> </div> </div> </div> </div> </i-form> </Modal> </template> <script> // 這裏能夠導入其餘文件（好比：組件，工具js，第三方插件js，json文件，圖片文件等等） // 例如：import 《組件名稱》 from '《組件路徑》'; export default { // 父組件傳來的值 props: ['show', 'productId'], data () { // 這裏存放數據 return { showModal: false, curProduct: { id: 0, name: '', code: '', remark: '' }// 當前頁面的產品信息 } }, // 監聽屬性 相似於data概念 computed: {}, // 方法集合 methods: { // 關閉子頁面 onCancel (isRefresh) { this.showModal = false this.curProduct = { id: 0, name: '', code: '', remark: '' }// 初始化 this.$emit('on-close', { isclose: true, isRefresh: isRefresh }) }, // 保存產品信息 onSave () { console.log(this.isNew) if (this.curProduct.id > 0) { this.$axios .put('/api/v1/product', { entity: this.curProduct }) .then(response => { if (response.data.isError) { this.$Modal.error({ title: '提示', content: '修改失敗', onOk: () => { // this.$Message.info('Clicked ok') }, onCancel: () => { // this.$Message.info('Clicked cancel') } }) } else { this.$Modal.success({ title: '提示', content: '修改爲功！', onOk: () => { this.onCancel(true) // this.$Message.info('Clicked ok') }, onCancel: () => { // this.$Message.info('Clicked cancel') } }) } }) .catch(function (error) { // 請求失敗處理 console.log(error) }) } else { this.$axios .post('/api/v1/product', { entity: this.curProduct }) .then(response => { if (response.data.isError) { console.log(response) this.$Modal.error({ title: '提示', content: '保存失敗', onOk: () => { // this.$Message.info('Clicked ok') }, onCancel: () => { // this.$Message.info('Clicked cancel') } }) // this.$Message.error('新增失敗:' + response.data.message) } else { this.$Modal.success({ title: '提示', content: '保存成功！', onOk: () => { // this.$Message.info('Clicked ok') this.onCancel(true) }, onCancel: () => { // this.$Message.info('Clicked cancel') } }) } }) .catch(function (error) { // 請求失敗處理 console.log(error) }) } }, init: function (proId) { // 初始化頁面內容 console.log('子頁初始化:' + proId) // 編輯時 if (proId > 0) { // 根據proId得到數據源信息，並加載到頁面上 this.$axios .get('/api/v1/product/' + proId) .then(response => { // console.log(response); (response.data.data) && (this.curProduct = response.data.data) console.log(this.curProduct) }) .catch(function (error) { // 請求失敗處理 console.log(error) }) } } }, // 獲取父頁面傳來的值，並根據主鍵id請求數據 watch: { show (validate) { console.log(validate) if (validate.showModal === true) { this.showModal = validate.showModal if (validate.productId > 0) { this.init(validate.productId) } else { this.curProduct = { id: 0, name: '', code: '', remark: '' }// 初始化 } } } } } </script>