iview踩坑记录（使用iview组件你不得不看的坑点和妙用指南！）

利用Modal的on-visible-change事件使用一个模态框实现增加和修改

// 利用modal_show实现模态框的显示和关闭

<Modal

v-model=“modal_show”

title=“csdn增改”

width=“800”

@on-visible-change=“modalShow”

modalShow (status) {

console.log(status)

if (!status) {

// clearForm为清空模态框输入数据的函数，免得下次点开数据混淆

this.clearForm()

// editStatus判断是否为搜索状态，可以帮助增加和修改不同接口的调用

this.editStatus = false

// 清空一些无法通过清空数据清空的输入框

this.$refs.select.clearSingleSelect()

}

},

补充：

假如同时使用Table组件实现修改功能，修改是数据最好使用深拷贝

{

title: ‘操作’,

align: ‘center’,

key: ‘action’,

width: 125,

minWidth: 125,

render: (h, params) => {

return h(‘div’, [

h(

‘Button’,

{

props: {

type: ‘primary’,

size: ‘small’

},

style: ‘margin-right:5px;’,

on: {

click: () => {

this.newsForm = JSON.parse(JSON.stringify(params.row))

this.add_show = true

this.editStatus = true

this.index = params.row.id

console.log(this.newsForm)

}

}

},

‘修改’

)])

}

}

两个输入框绑定

---

利用select的label-in-value实现两个输入框的绑定

<Select

v-model=“index”

placeholder=“请选择学校”

filterable

label-in-value

@on-change=“match1”<