vue3中基于element-plus封装一个表格弹框组件，要求可以单选和多选table数据

最新推荐文章于 2025-04-12 22:37:40 发布

jieyucx

最新推荐文章于 2025-04-12 22:37:40 发布

阅读量1.7k

点赞数 24

分类专栏： vue的那些事 vue3从入门到精通文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/jieyucx/article/details/139147193

版权

单选：
在这里插入图片描述

<template>
  <SelectMaterial
      ref="selectMaterialRef"
      check="checkbox"
      @select="selectMaterial"
    ></SelectMaterial>
   <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddMaterial"
     >添加备件</el-button>
</template>
<script setup>
import {
      ref } from 'vue';

const selectMaterialRef = ref('');
// 选择事件
const selectMaterial = data => {
     
  console.log('选择的表格数据', data);
};
// 打开添加备件弹框
const handleAddMaterial = () => {
     
  selectMaterialRef.value.openDialog();
};
</script>

在这里插入图片描述

多选：
在这里插入图片描述

<template>
  <SelectMaterial
      ref="selectMaterialRef"
      check="checkbox"
      @select="selectMaterial"
    ></SelectMaterial>
   <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddMaterial"
     >添加备件</el-button>
</template>
<script setup>
import {
      ref } from 'vue';

const selectMaterialRef = ref('');
// 选择事件
const selectMaterial = data => {
     
  console.log('选择的表格数据', data);
};
// 打开添加备件弹框
const handleAddMaterial = () => {
     
  selectMaterialRef.value.openDialog();
};
</script>

在这里插入图片描述

弹框表格组件代码

<template>
  <el-dialog v-model="dialogShow" @close="handleClose" width

最低0.47元/天解锁文章