表格内每行Popover 弹出框

封装组件

<template>
  <el-popover placement="top" width="180" v-model="delDialog">
        <p>{{ tips }}</p>
        <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="delDialog = false">取消</el-button>
        <el-button type="primary" size="small" @click="handleOkClick">确定</el-button>
        </div>

        <el-button type="primary" size="small" slot="reference">开锁</el-button>
    </el-popover>
</template>

<script>
export default {
  name: 'ZPopover',
  data() {
    return {
      delDialog: false
    }
  },
  props: {
    tips: {
      type: String,
      default: '确定执行此操作？'
    },
    index: {
      type: Number
    }
  },
  methods: {
    handleOkClick() {
      this.$emit('okClick', this.index)
    }
  }
}
</script>

引用

import ZPopover from '@/components/ZPopover'

export default {
  components: {
    wangeditor,
    ZPopover
  },
  ...

模板使用

<el-table-column label="创建时间">
          <template slot-scope="slotProps" width="240">{{slotProps.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="slotProps">
            <z-popover tips="确定发送远程开锁指令？" :index="slotProps.$index" @okClick="unLock"></z-popover>
            <br>
            <el-button type="text" @click="relate(slotProps.$index)">开锁记录</el-button>
          </template>
        </el-table-column>

转载于:https://my.oschina.net/u/3058876/blog/3017534