解决el-table中使用el-popover组件弹窗显示关闭问题

问题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组件的内容代码，仅供参考：

<template>
  <div>
    <el-popover
      v-model="visible"
      placement="left"
      width="400"
      title="优化"
      popper-class="optimize-popover"
    &gt;
      <el-form ref="popoverForm" :model="popoverForm" label-width="100px" class="popover-form"&gt;
        <el-form-item label="负责人"&gt;
          <el-input v-model="popoverForm.leader" /&gt;
        </el-form-item&gt;
        <el-form-item label="计划完成日期">
          <el-date-picker v-model="popoverForm.planCompleteDate" :teleported="false" :append-to-body="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="popoverForm.state" :popper-append-to-body="false" placeholder="请选择状态">
            <el-option label="清空" value="清空" />
            <el-option label="尚未确定" value="尚未确定" />
            <el-option label="尚未决策" value="尚未决策" />
            <el-option label="尚未执行" value="尚未执行" />
            <el-option label="已完成" value="已完成" />
            <el-option label="不执行" value="不执行" />
          </el-select>
        </el-form-item>
        <el-form-item label="完成日期">
          <el-date-picker v-model="popoverForm.realityCompleteDate" :teleported="false" :append-to-body="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="popoverForm.remark" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el-icon-check" @click="onSubmit" />
          <el-button class="el-icon-close" type="info" @click="visible = false" />
        </el-form-item>
      </el-form>
      <b v-if="(command.childLosePcList &amp;&amp; command.childLosePcList.length > 0) || (command.childLoseDcList &amp;&amp; command.childLoseDcList.length > 0)" slot="reference" style="border-bottom: dashed 1px #0088cc;cursor: pointer;color: #337ab7;" @click="visible = false">
        {{ field }}
      </b>
      <b v-else slot="reference">{{ field }}</b>
    </el-popover>
  </div>
</template>

<script>
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 &amp;&amp; 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')
    }
  }
}
</script>
<style lang="scss">
.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;
  }
}
</style>

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

<el-table-column label="完成日期" min-width="90" align="left">
   <template slot-scope="scope">
      <el-form-item label-width="0" :prop="'dataList.' + scope.$index + '.optimize'">
        <optimizePopover v-if="cellClick == 'Optimize'" :command="scope.row" :field="scope.row.optimize && scope.row.optimize.realityCompleteDate ? scope.row.optimize.realityCompleteDate.slice(0, 10) : '-'" @refreshTable="refreshTable"/>
                  <span v-else>{{ scope.row.optimize && scope.row.optimize.realityCompleteDate ? scope.row.optimize.realityCompleteDate.slice(0, 10) : '-' }}</span>
       </el-form-item>
    </template>
</el-table-column>

代码007普通

打赏 收藏 海报 链接