vue 通用表格组件封装附代码

细水长流者

已于 2024-08-23 11:06:25 修改

阅读量1.1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript ecmascript

于 2024-08-23 09:00:00 首次发布

本文链接：https://blog.csdn.net/qiaoermeng/article/details/141438831

文章目录

以下是关于封装my-table表格组件的基本要求，理解即可。
1.数据不能写死，动态传递表格渲染的数据；
2.结构不能写死：
（1）表头支持自定义；
（2）主体支持自定义；

基本步骤如下：

1.新建MyTable.vue文件

在这里插入图片描述

2.导入和注册

在这里插入图片描述

3.使用组件

在这里插入图片描述

4.数据准备（渲染表格所需要的数据来源）

在这里插入图片描述

5.父组件中的goods数据向子组件（MyTable.vue)传递数据

在这里插入图片描述

6.自定义表头

在这里插入图片描述

7.自定义表主体

在这里插入图片描述

代码结构如下所示，总共四个代码文件，如果只是为了学习表格组件封装，只需要看MyTable.vue以及app.vue即可。

在这里插入图片描述

8.代码分享

app.vue代码如下：

<template>
  <div class="app">
    <div class="table-case">
      <MyTable :data="goods">
        <template #head>
          <th>编号</th>
          <th>图片</th>
          <th>名称</th>
          <th width="100px">标签</th>
        </template>
        <template #body="{ item, index }">
          <td>{
   
   {
   
    index + 1 }}</td>
          <td>
            <img :src="item.picture" alt="" />
          </td>
          <td>{
   
   {
   
    item.name }}</td>
          <td>
            <!-- 标签组件 -->
            <MyTag v-model="item.tag"></MyTag>
          </td>
        </template>
      </MyTable>
    </div>
  </div>
  <!-- 
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div> -->
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vu