526互联

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

发布时间 2023-08-30 10:44:52作者: 干饭吧

表格的自定义内容：

 （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>