test-web/src/crud/components/UD.operation.vue

<!-- 默认插槽值 -->
<template>
    <el-button v-if="isEdit" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <!-- 弹出框提示 trigger="click" -->
    <el-popover v-if="isDelete" trigger="click" v-model:visible="scope.row.visible" placement="top" :width="160">
        <div>
            <div style="margin-bottom: 10px;">
                <span>是否确认删除该条数据?</span>
            </div>
            <div class="as-layout-horizontal">
                <el-button type="text" @click="scope.row.visible = false" style="width: 100%;">取消</el-button>
                <el-button type="primary" @click="handleDelete(scope.$index, scope.row)" style="color: #fff;
    margin-right: 10px;">确认</el-button>
            </div>
        </div>
        <template #reference>
            <el-button size="small" type="danger" @click="hintDelete(scope.$index,data)">删除</el-button>
        </template>
    </el-popover>
</template>
<script>
    import CRUD, {
        crudConfig
    } from "@/crud/crud"

    export default {
        mixins: [crudConfig()], //运用混入的的方法
        emits: ['handleDelete', 'handleEdit'],
        props: { //插值
            scope: {
                default: null,
                type: Object
            },
            data: {
                default: null,
                type: Object
            },
            isEdit: {
                default: true,
                type: Boolean
            },
            isDelete: {
                default: true,
                type: Boolean
            }
        },
        data() { //字段
            return {
                that: this
            }
        },
        methods: { //方法
            handleDelete(idx, data) {
                this.$emit('handleDelete', idx, data)
            },
            //编辑
            handleEdit(idx, row) {
                this.$emit('handleEdit', idx, row)
            },
            //删除弹窗
            hintDelete(idx, data) {
                data.forEach((element, index) => {
                    if (idx === index) {
                        element.visible = true
                    } else {
                        element.visible = false
                    }
                });
            }
        }
    }
</script>
<style scoped>

</style>