Vue 实现封装combogrid表格网格（Easyui框架有类似的）（一）

最新推荐文章于 2024-09-02 07:42:08 发布

AGCA

最新推荐文章于 2024-09-02 07:42:08 发布

阅读量1.1k

点赞数

分类专栏： combogrid 文章标签： vue js javascript

本文链接：https://blog.csdn.net/agca_zxl/article/details/115975264

版权

combogrid 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

在这里插入图片描述

combogrid效果图

在这里插入图片描述

combogrid的介绍

组合网格（combogrid）把可编辑的文本框和下拉数据网格面板结合起来，用户可以从下拉数据网格面板中快速查找和选择。组合网格（combogrid）提供了选择某个项目的键盘导航支持。

combogrid应用场景

combogrid类似选择输入的下拉表单，比如下拉菜单，但是和下拉菜单不同的是，选择的选项是一个表格，相当于一个小型的组件页面了。因此，它主要面对的对象是可选择性比较多的数据或者说是一整个数据表。

combogrid需要封装的组件

（1）i-whiteBoad.vue 白板公共组件

（2）i-combogrid.vue 组合网格公共组件

（3）i-form.vue 单个表单公共组件

（4）i-table.vue 表格公共组件

（5）i-toolBar.vue 表头按钮的公共组件（忽略）

combogrid需要使用到的封装js文件

（1）publicForm.js 封装基础表单组件框架的js文件

（2）whiteBoard.js 白板组件的动态位置js文件

一、i-whiteBoad.vue白板的封装

白板组件很简单，就是一个白色的面板，用作combogrid或者其他组件的容器，并且可以动态改变弹出的位置。
template

<template>
<transition :name="transionName">
    <div class="white-dialog" v-if="dialogVisible" :dialogVisible="dialogVisible" 
        :target="target" :style="fix"  :id="timeValue">
        <slot></slot>
    </div>
</transition>
</template>

script

import {EventBus} from '../modules/event-bus.js' // 引入事件总线
import whiteBoard  from '../modules/whiteBoard.js' // 引入白板
export default {
    props: {
        transionName: { // 白板的动画
            type: String,
            default: 'el-zoom-in-top'
        },
        width: {
            type: String,
            default: ''
        },
        timeValue: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            target:{},
            dialogVisible:false,
            fix: {left: '0px', top: '45px'}
        }
    },
    watch: {
        dialogVisible: { // 监听显示隐藏
            handler(value) {
                this.$nextTick(()=>{
                    var body = document.querySelector('body');
                    if(this.dialogVisible){
                        value && (this.fix = whiteBoard.start(this.target, this.width));
                        if(body.append){
                            body.append(this.$el);
                        }
                        else{
                            body.appendChild(this.$el);
                        }
                    }
                });
            },
            deep: true
        }
    },
    mounted() {
    },
    methods: {
        changeWhiteBig(e) { // 动态改变位置
            e && (this.fix = whiteBoard.start(e, this.width));
        },
        updateWhite() { // 多级点击消失逻辑
            this.$el && this.$el.tagName && document.querySelector('body').removeChild(this.$el)
        }
    },
}

style

.white-dialog {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px #ddd;
    position: absolute;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 2px;
    z-index: 999;
}

白板组件的动态弹出位置的js文件

whiteBoard.js

import $ from 'jquery';
var whiteBoard = function () {
    this.v = '1.0.0'
};

whiteBoard.start = function(event, tablebox) {
    var elem = event.target,
        parentElem = tablebox.replace("px",""), // 698
        bodyWidth = $(document.body).width(), // 1920
        offLeft = $(elem).offset().left, // 1581
        offHeight = $(elem).offset().top + elem.offsetHeight + 5,
        moveLeft = parentElem - (bodyWidth - offLeft), // 隐藏的宽度
        rightwidth = bodyWidth - offLeft - $(elem).parent().width(); // 右边的宽度 $(elem).width()270
    if ((bodyWidth - offLeft) < parentElem) {
        offLeft = bodyWidth - parentElem - 20 - rightwidth;
    }
    var fix = {left: offLeft + 'px', top: offHeight + 'px'};
    return fix;
}
export default whiteBoard