列表的实用技巧
项目使用Element-ui
应用场景: 常用的列表页面，通常会伴随着「新增」，「编辑」的功能。 使用的是dialog的方式来实现功能，不可避免的需要在列表页面引入新增和编辑2个组件。
这个时候 我们通常会有2种选择：
- 父组件管理子组件的状态
- 子组件管理自身的状态
「父组件管理子组件的状态」
- 子组件 接收父组件的visible状态，并提供父组件关闭dialog的事件('onCancel','onOk' )
<template>
<el-dialog :visible="visible" :before-close="handleBeforeClose" @close='handleClose'>
<el-form ref="formModel" :model="formModel" :rules="rules">
<el-form-item label='类型' prop='type'>
<el-input size='small' v-model='formModel.type'></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" size="small" @click="onSure">确定</el-button>
<el-button type="primary" size="small" @click="onReset">重置</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'addDialog',
data() {
return {
// 表单的结构体
formModel: {
type:''
},
// 表单的验证条件
rules: {},
}
},
props: {
visible: {
type: Boolean,
default: false,
},
},
methods: {
handleClose() {
this.$emit('onCancle')
},
handleBeforeClose(done) {
this.onReset()
done()
},
onSure() {
this.$refs.formModel.validate((valid) => {
if (valid) {
// 调用接口
this.$emit('onOk')
}
})
},
onReset() {
this.$refs.formModel.resetFields()
},
},
}
</script>
❝功能描述：
❞
- 编辑区域使用form组件，这样方便对输入内容进行验证，以及相关的清除功能。
- 使用before-close属性，可以在关闭dialog时对form组件做重置功能。
- 父组件 管理子组件的visible状态
<template>
<div>
<addDialog :visible='addVisible' @onOk='handleAddOk' @onCancel='handleAddCancel'/>
<editDialog :visible='editVisible' @onOk='handleEditOk' @onCancel='handleEditCancel'/>
</div>
</template>
<script>
export default {
data(){
addVisible:false,
editVisible:false
},
methods:{
handleAddOk(){
this.addVisible = false
// 这里我们通常会调用 表格的查询方法 刷新表格数据
},
// ....改变dialog组件的visible状态
}
}
</script>
「子组件管理自身的状态」
- 子组件 管理自身的visible状态，并提供toggle方法来改变自身的状态。
template>
<el-dialog :visible.sync="visible" :before-close="handleBeforeClose" >
<el-form ref="formModel" :model="formModel" :rules="rules">
<el-form-item label='类型' prop='type'>
<el-input size='small' v-model='formModel.type'></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" size="small" @click="onSure">确定</el-button>
<el-button type="primary" size="small" @click="onReset">重置</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'addDialog',
data() {
return {
formModel: {
type:''
},
rules: {},
visible:false
}
},
methods: {
// 提供改变自身状态的方法
toggle(){
this.visible = !this.visible
},
handleBeforeClose(done) {
this.onReset()
done()
},
onSure() {
this.$refs.formModel.validate((valid) => {
if (valid) {
// 调用接口
this.toggle()
this.$emit('onOk')
}
})
},
onReset() {
this.$refs.formModel.resetFields()
},
},
}
</script>
- 父组件 通过ref来调用子组件的方法
<template>
<div>
<addDialog ref='addDialog' @onOk='handleAddOk' />
<editDialog ref='addDialog' @onOk='handleEditOk' />
</div>
</template>
<script>
export default {
data(){
},
methods:{
showAddDialog(){
// 调用子组件的方法，改变子组件的visible状态
this.$refs.addDialog.toggle()
}
// ....其他方法
}
}
利弊分析：
- 父组件管理子组件状态
如果父组件包含很多dialog的时候，就会出现需要管理很多visible状态的问题。因此在dialog很多的情况下，这个时候并不实用。
- 子组件管理自身状态
子组件能够管理自身的visible状态，父组件不需要关心子组件的visible状态。
