vue表格组件

最新推荐文章于 2024-08-08 08:27:18 发布

月华万象

最新推荐文章于 2024-08-08 08:27:18 发布

阅读量386

点赞数 7

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44332903/article/details/134629930

版权

文章介绍了如何使用Vue的插槽功能模仿ElementUI的表格组件，包括RespsiTable和RespsiTableItem的代码片段，展示了如何通过props传递数据并利用provide/inject进行组件间的通信。

摘要由CSDN通过智能技术生成

我想到了用插槽来实现，类似elementui,具体调用代码

一、代码调用片段

<RespsiTable :tableData="tableData">
        <RespsiTableItem width="100px" name="名称" props="name">
        </RespsiTableItem>
        <RespsiTableItem name="id" props="id">
        </RespsiTableItem>
        <RespsiTableItem name="年龄" props="年龄">
        </RespsiTableItem>
    </RespsiTable>
const tableData = [
    { 'name': '鸡哥', 'id': '123', '年龄': 21 },
    { 'name': '鸡哥', 'id': '123', '年龄': 21 },
    { 'name': '鸡哥', 'id': '123', '年龄': 21 },
    { 'name': '鸡哥', 'id': '123', '年龄': 21 },
]

最终展示效果
在这里插入图片描述

二、实现

2.1RespsiTable获取表格数据

<template>
    <div style="display: flex;">
        <slot></slot>
    </div>
</template>

<script setup>
import {  provide } from 'vue'

const props = defineProps(["tableData"])


provide('tableData', 
    props.tableData
)      
</script>

这里通过:tableData获取数据存入props，然后通过provide给子组件用

2.2RespsiTableItem展示数据

<template>
    <div :style="{width:props.width}">
        <tr>
            <th>{{ props.name }}</th>
        </tr>
        <tr v-for="item in provideState">
            <td>{{ item[props.props] }}</td>
        </tr>
    </div>
</template>

<script setup>
import { inject } from 'vue'

const props = defineProps(["name", "props","width"])

const provideState = inject('tableData')    // 接收参数

</script>

这里通过:name获取列名,:props获取绑定的数据值,width设置具体列宽度,inject接收表格总数据通过对象key访问这一列的数据