＜script setup＞基于elementPlus封装一个公用的表格组件

本文链接：https://blog.youkuaiyun.com/m0_69853343/article/details/133237303

本文介绍了如何在Vue应用中使用ElementPlus库创建一个公共表格组件，并展示父子组件之间的数据传递方法。通过`@view`、`@edit`和`@delete`自定义事件，实现表格行的操作功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心知识点：父子组件传值

一、引入elementPlus

//全局引入
npm install element-plus --save

挂载到app上

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ELIcons from '@element-plus/icons-vue'
import App from './App.vue'


const app = createApp(App)
for (const iconName in ELIcons) {
    app.component(iconName, ELIcons[iconName])
  }
app.use(ElementPlus)
app.mount('#app')

二、在父组件中引入公共表格组件标签

  <comTable
          :data2="'这是一个test数据'"
          :column="columns"
          :data="tableData"
          @view="handleView"
          @edit="handleEdit"
          @delete="handleDelete"
        ></comTable>

三、公共表格组件的内容

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :fixed="column.fixed"
        :sortable="column.sortable"
      >
        <template #default="{ row }">
          <span>{{ row[column.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleView(row)"
            >查看</el-button
          >
          <el-button link type="primary" size="small" @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button link type="danger" size="small" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  <script setup>
import { ref, defineEmits } from "vue";
const emit = defineEmits(["view", "edit", "delete"]); // 声明组件的自定义触发事件
const props = defineProps({
  data: {
    type: Array,
  },
  data2: {
    type: String,
    default: "defaultValue",
  },
  column: {
    type: Array,
  },
});
const tableData = ref(props.data);
console.log(777777, tableData.value);
const columns = ref(props.column);
console.log(888888888, columns.value);
tableData.value.slice();

// 处理查看操作
const handleView = (row) => {
  emit("view", row);
  console.log("查看", row);
};

// 处理编辑操作
const handleEdit = (row) => {
  emit("edit", row);
  console.log("编辑", row);
};

// 处理删除操作
const handleDelete = (row) => {
  emit("delete", row);
  console.log("删除", row);
};
</script>
  
  <style>
</style>