解决el

您所在的位置：网站首页 › 表单onsubmit › 解决el

解决el

2023-06-24 03:12| 来源: 网络整理| 查看: 265

问题1：解决el-table多行多个单元格中使用el-popover组件弹窗显示关闭问题

使用v-model="visible" 去掉trigger属性在需要打开和关闭的地方使用visible控制即可无需ref获取doShow()打开 doClose()关闭方法或使用ref动态命名等

问题2：el-popover组件里使用el-date-picker日期选择器组件打开el-date-picker日期选择器导致el-popover组件弹窗消失

在el-date-picker日期选择器组件里使用属性 :append-to-body="false"即可

问题3：项目中修改el-popover组件样式

需要在组件el-popover标签使用popper-class属性并且去掉style标签的scoped属性

以下代码为el-table组件里单元格引入el-popover组件的内容代码，仅供参考：

{{ field }} {{ field }} import { addRiskOptimize, updateRiskOptimize } from '@/api/dfmea/analysis/optimize/api' export default { name: 'OptimizePopover', props: { command: { type: Object, default: () => {} }, field: { type: String, default: '-' } }, data() { return { popoverForm: { leader: '', planCompleteDate: '', state: [], realityCompleteDate: '', remark: '' }, visible: false } }, created() { this.popoverForm.leader = this.command.optimize && this.command.optimize.leader ? this.command.optimize.leader : '' this.popoverForm.planCompleteDate = this.command.optimize && this.command.optimize.planCompleteDate ? this.command.optimize.planCompleteDate : '' this.popoverForm.state = this.command.optimize && this.command.optimize.state ? this.command.optimize.state : [] this.popoverForm.realityCompleteDate = this.command.optimize && this.command.optimize.realityCompleteDate ? this.command.optimize.realityCompleteDate : '' this.popoverForm.remark = this.command.optimize && this.command.optimize.remark ? this.command.optimize.remark : '' }, methods: { onSubmit() { const params = { parentTreeId: this.command.currentLoseNodeId, tmTreeId: this.command.childLoseNodeId, leader: this.popoverForm.leader, leaderId: this.command.optimize.leaderId, planCompleteDate: this.popoverForm.planCompleteDate, state: this.popoverForm.state, realityCompleteDate: this.popoverForm.realityCompleteDate, remark: this.popoverForm.remark, tmSeverityId: this.command.optimize.tmSeverityId, feVal: this.command.optimize.feVal } if (this.command.optimize.leader == null && this.command.planCompleteDate == null && this.command.state == null && this.command.realityCompleteDate == null && this.command.remark == null) { addRiskOptimize(params).then(res => { if (res.code === 200) { this.$message({ type: 'success', message: this.$t('updateSuccess') }) this.closePopover() } else { this.$message({ type: 'error', message: this.$t('modifyFailed') }) } }) } else { params.id = this.command.optimize.id updateRiskOptimize(params).then(res => { if (res.code === 200) { this.$message({ type: 'success', message: this.$t('updateSuccess') }) this.closePopover() } else { this.$message({ type: 'error', message: this.$t('modifyFailed') }) } }) } }, closePopover() { this.visible = false this.$emit('refreshTable') } } } .el-popover.optimize-popover { padding: 0; .el-popover__title { padding: 8px 14px; margin: 0!important; font-size: 14px; font-weight: bold; color: #676A6C; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .popover-form { margin-top: 10px; margin-right: 15px; } }

以下代码为el-table组件里单元格引入上面el-popover组件的内容代码，仅供参考：

{{ scope.row.optimize && scope.row.optimize.realityCompleteDate ? scope.row.optimize.realityCompleteDate.slice(0, 10) : '-' }}

【本文地址】

解决el

解决el

今日新闻

推荐新闻