iview表格简单二次封装

最新推荐文章于 2025-04-24 17:20:34 发布

妙心人

最新推荐文章于 2025-04-24 17:20:34 发布

阅读量910

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_42783273/article/details/121329521

版权

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

8 篇文章

订阅专栏

该博客介绍了如何在Vue.js中使用Table组件，展示数据并自定义列模板。通过`v-for`指令遍历`columns`和`dataSource`，并在每个列上应用自定义插槽来实现内容的个性化展示。示例代码展示了如何传递属性和使用内联模板进行数据绑定。

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

<template>
    <Table ref="current" v-bind="$attrs" :columns="columns" :data="dataSource">
        <template v-for="item in columns" :slot="item.slot?item.slot:''" slot-scope="{ row, column , index }">
            <slot :name="item.slot?item.slot:''" v-bind="{ row, column , index }"></slot>
        </template>
    </Table>
</template>
<script>
export default {
    props: {
        columns: {
            type: Array,
            default () {
                return []
            }
        },
        dataSource: {
            type: Array,
            default () {
                return []
            }
        }
    }
}
</script>