element-plus的表格、弹窗、气泡弹窗的使用方法

表格的自定义内容：

 （1）当没有内容的时候自定义显示：  

  <template v-slot:empty>

            <div>

                自定义内容

            </div>

        </template>

(2.)表格的按钮的操作一栏的显示：

  <template #default="scope">

            <div>

                <el-button @click="handle(scope.row)"></el-button>

            </div>

        </template>

 

弹窗的显示方法：

（1）打开的方法： 用v-model来确定弹窗时候显示

   <el-dialog v-model="false">

        </el-dialog>

（2）弹窗的的添加自定义的按钮的位置的footer：

  <el-dialog v-model="false">

            <div>主体内容</div>

            <template #footer>

                <div>

                    <el-button>确定</el-button>

                </div>

            </template>

        </el-dialog>

 

气泡弹窗的显示的方法：

<template>
<div>
<el-button ref="btn" type="primary" @click="handleButtonClick">Show Popover</el-button>
<el-popover :visible.sync="visible" v-model:show-timeout="showTimeout" @show="handlePopoverShow" @hide="handlePopoverHide" @clickoutside="handleClickOutside">
Popover Content
</el-popover>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const btnRef = ref(null);
const visible = ref(false);
const showTimeout = ref(null);

const handleButtonClick = () => {
visible.value = true;
};

const handlePopoverShow = () => {
// 暂停 Popover 的自动关闭
showTimeout.value = -1;
};

const handlePopoverHide = () => {
// 在选择完成后手动关闭 Popover
visible.value = false;
};

const handleClickOutside = () => {
// 点击 Popover 以外的区域时关闭 Popover
visible.value = false;
};

return {
btnRef,
visible,
showTimeout,
handleButtonClick,
handlePopoverShow,
handlePopoverHide,
handleClickOutside,
};
},
};
</script>