vue 自定义grid

最新推荐文章于 2024-08-02 19:04:46 发布

不要这么懒下去

最新推荐文章于 2024-08-02 19:04:46 发布

阅读量4.7k

点赞数

分类专栏： vue element

本文链接：https://blog.csdn.net/wolfsky6/article/details/81026584

版权

这篇博客介绍了如何基于Element-UI的Grid组件进行简单封装，包括Grid和GridColumn的使用，并提到了将column里的formatter功能放在了plugin中，同时引入了util和api模块。虽然存在一些懒加载的遗留问题，但可通过注释或修改来解决。源代码可在github找到。

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

基于element-ui grid 的简单封装

grid

<template>
    <div>
        <el-table :data="rows"
            stripe
            border
            :show-header="showHeader"
            style="width:100%">
            <template v-for="(column,key,index) in columns">
                <GridColumn  :column="column" :key="key" :pk="index"></GridColumn>
            </template>
        </el-table>
        <div class="text-right m-t" v-if="showFooter">
            <Pagination :options="this" @list="list"></Pagination>
        </div>
    </div>
</template>

<script>
    import api from "~/api"
    import {baseUtil, renderUtil} from "~/util"
    import GridColumn from "./Grid.column.js"

    export default {
        props:{
            inData:null,
            columns:{
                type:Array,//{header,dataIndex,type}
                required:true
            },
            url:null,
            getQuery:{
                type:Function
            },
            showHeader: {
                type: Boolean,
                default: true
            },
            showFooter:{
                type: Boolean,
                default: true
            },
        },
        components:{
            GridColumn