下面展示一些 内联代码片
。
1. addFlag : 三目运算切换 modal弹窗标题 新建 或 编辑
2. showModal : 是否显示弹窗
3. @click事件:可以有两个表达式
<a-button class="addResearch" @click="addFlag=true;showModal=true"><a-icon type="plus"/>新建研判</a-button>
<a-modal :visible.sync="showModal" :before-close="handleClose" :title="addFlag? '新建研判':'修改研判'" ok-text="确认" cancel-text="取消" @ok="saveTab()">
<div class="modal"><span>研判名称</span><a-input v-model="tabObj.name" placeholder="" style="margin-left:20px;width:300px"/></div>
<span slot="footer" class="dialog-footer">
<a-button type="success" @click="saveTab()">提交</a-button>
<a-button type="primary" @click="showModal = false">取消</a-button>
</span>
</a-modal>
//js
//data函数
data(){
return {
tabObj:{}
addFlag: true,
showModal: false,
返回后台的参数: name,data
//js
//methods函数
methods:{
//新增
async saveTab () {
let params = {}
params.name = this.tabObj.name
params.data = ''
let res = await testService.getAdd(params)
console.log('res:', res)
this.showModal = false
this.getTableList()
}
突破点: tabObj
// 编辑
handleEdit (record) {
console.log('deRecord:', record)
this.addFlag = false
this.showModal = true
this.tabObj.name = ''
},
**
总结
- 共用一个modal弹窗 标题的切换:设定一个flag
- 共用一个save确定事件: 通过共用一个对象 文中为tabObj
**