封装组件
<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>