vue 自定义grid

最新推荐文章于 2023-08-09 08:58:22 发布

原创最新推荐文章于 2023-08-09 08:58:22 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

element

1 篇文章

订阅专栏

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

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

基于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
        },
        created(){
            if(this.inData){
                this.rows=this.inData;
            }
        },
        data(){
            return {
                rows:[],
                params:{},
                total:0
            }
        },

        watch:{ //watch props 变化
            'inData':function(value){
                if(value)
                    this.rows=value;
            },
            'url':function(value){
                //url 变化 重取数据
                this.list();
            }
        },

        mounted(){
            if(this.url)
                this.list();
        },
        methods:{
            list(){
                api.request({
                    url:this.url,
                    params:this.getQueryData(),
                    success:json=>{
                        this.rows=json.rows;
                        this.total=json.total;
                    }
                })
            },

            getQueryData(){
                var outQuery=this.params
                if(this.getQuery){
                    outQuery=Object.assign({},this.params,this.getQuery())
                }
                return outQuery;
            }
        }

        
    }
</script>

gridcolumn

var pick=require('lodash/pick')

const isNotIn=(obj,v,key)=>v&&(obj[key]=v)

import pluginHelper from './Grid.column.plugin.js'


export default {
    name:'GridColumn',
    render(h){
        var me=this;
        function renderChild(column){

            var ps={attrs:{}};
            var {header,dataIndex,width,formatter,children,type,pk,slot}=pluginHelper(column,h);
            ps.attrs.key=dataIndex||(pk+type);
            isNotIn(ps.attrs,header,'label')
            isNotIn(ps.attrs,dataIndex,'prop')
            isNotIn(ps.attrs,width,'width')
            isNotIn(ps.attrs,formatter,'formatter')

            if(slot){
                //搞定
                ps.scopedSlots={default:({row})=>slot({row,column})}
            }
            
            if(column.children){
                ps.attrs.headerAlign="center";
                return <el-table-column {...ps}>
                    {
                        column.children.map((child,index)=>{
                            return renderChild(child)
                        })
                    }
                </el-table-column>
            }
            else{
                return <el-table-column 
                {...ps}>
                </el-table-column>
            }
        }

        if(this.column)    
            return renderChild(this.column);
    },
    props:{
        column:null,
        pk:{
            type:String,
        }
    },
}

column 里的formater 放在plugin 里了

/** 对column 的补充 
* date 04-20
* author wolfsky7 -->------|----------------->
**/
import {renderUtil} from '~/util'


//各种formater 定义
// Vue.prototype.renderYmd = renderUtil.renderYmd;
// Vue.prototype.renderTime = renderUtil.renderTime;
// Vue.prototype.renderNumber = renderUtil.renderNumber;
// Vue.prototype.renderMoney = renderUtil.renderMoney;
// Vue.prototype.renderEnum = renderUtil.renderEnum;
// Vue.prototype.renderPhone = renderUtil.renderPhone;
// Vue.prototype.renderEnabled = renderUtil.renderEnabled;
// Vue.prototype.renderDistrictCode = renderUtil.renderDistrictCode;

const typeFormaters={
    'time':'renderTime',
    'money':'renderMoney',
    'number':'renderNumber',
    'phone':'renderPhone',
    'ymd':'renderYmd',
    'enum':'renderEnum',
    'districtCode':'renderDistrictCode',
    'status':'renderStatus',
    'gender':renderUtil.renderEnum2.bind(null,'gender'),
    'gateway':renderUtil.renderEnum2.bind(null,'gateway'),
}

const typeRenders={
    'switch':h=>({row,column})=><el-switch value={row[column.dataIndex]}></el-switch>,
    'btns':h=>({row,column})=><div class="nowrap">
        {
            column.btns.map(btn=>{
                return <el-button  size="mini" type={btn.type||'primary'} on-click={btnHandler(btn,row)}>{btn.text}</el-button>
            })
        }
        </div>
}

const btnHandler=(btn,row)=>()=>{
    btn.handler(row);
}

export default (column,h)=>{
    //对column 进行补充
    column=types(column,h)

    column=customsTypes(column,h);

    column=customs(column,h);

    return column;
}

const types=(column,h)=>{
    //类型补充
    if(!column.formatter&&'type' in column&&typeFormaters[column.type]){
        let formatter,format=typeFormaters[column.type];
        if(typeof format=="function"){
            formatter=format;
        }
        else{
            formatter=renderUtil[format];
        }
        return {
            ...column,
            formatter
        }
    }

    return column;
}

const customsTypes=(column,h)=>{
    if(!column.render&&column.type in typeRenders){
        column.render=typeRenders[column.type]
    }
    return column;
}


const customs=(column,h)=>{
    if('render' in column){
        var slot=column.render(h);
        var {render,...left}=column
        return {
            ...left,
            slot
        }
    }
    return column;
}

其中引入了 util 和 api 懒的改了自己注释或者修改一下即可

github