element-ui的popover弹出框点击取消

简介: element-ui的popover弹出框点击取消

一、在template先写入

 <el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" label="id" prop="id" width="180" />
          <el-table-column align="center" label="名称" prop="name" width="180">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.parentName"
                placeholder="请输入内容"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="库存" prop="name" width="180">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.parentName"
                placeholder="请输入内容"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="限购">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typeName" placeholder="请输入内容" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="划线价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typeName" placeholder="请输入内容" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="售价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typeName" placeholder="请输入内容" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typeName" placeholder="请输入内容" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="left"
                trigger="click"
                width="260"
              >
                <p>确定删除改规格吗?</p>
                <div style="text-align: center">
                  <el-button size="mini" @click="quxiao(scope)">取消</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteRow(scope, tableData)"
                  >
                    确定
                  </el-button>
                </div>
                <div style="cursor: pointer; color: #3054eb" slot="reference">
                  删除
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>

二、js

quxiao(ee) {
        ee._self.$refs[`popover-${ee.$index}`].doClose()
      },
closePopover(ee) {
        this.$confirm(`确定要将${ee.row.name}审核通过吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let cc = {
              id: parseInt(ee.row.id),
              distributionStatus: 1,
            }
            let zz = await toExamine(cc)
            if (zz.code == 200) {
              await this.fetchData()
              this.$message({
                type: 'success',
                message: '审核成功!',
              })
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '您取消了审核',
            })
          })
        console.log(ee.row)
        ee._self.$refs[`popover-${ee.$index}`].doClose()
      },
目录
相关文章
HTML+VUE+element-ui通过点击不同按钮展现不同页面
HTML+VUE+element-ui通过点击不同按钮展现不同页面
161 1
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2133 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3433 0
|
7月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
197 0
|
4月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
575 0
|
7月前
【UI】elementui select点击获取label 和 value
【UI】elementui select点击获取label 和 value
61 1
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
人工智能 自然语言处理 语音技术
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
关于element ui中引入官方的NavMenu时出现点击某个子菜单时,所有的子菜单全都展开问题
249 0
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框
239 0
element-ui:el-autocomplete实现搜索结果多次点击不关闭弹框