Vue 实现封装combogrid表格网格（Easyui框架有类似的）及使用（三）

i-combogrid.vue组合表格组件的封装

i-combogrid.vue组合表格组件是文章的重点部分，以下代码部分引入的组件和js文件在之前文章里有写道。可以参考第一章和第二章。
第一章
第二章

i-combogrid.vue的实现

template

<template>
    <div :getOptions="getOptions">
        <el-input ref="comboinput" @click.native="showCombogrid($event)" placeholder="请选择" v-model="inputShowValue">
            <i slot="suffix" class="el-icon-arrow-down" :class="iconChange"></i>
        </el-input>
        <iwhiteBoad ref="whiteBoad" :width="width" :timeValue="timeValue">
            <div class="i-combogrid">
                <iform ref="iform" :model="FormData" :rightFormData="FormData" :formTypeValue="formTypeValue"
                :timeValue="timeValue">
                    <el-button v-if="showRearch" @click="getTableData"><i class="el-icon-search"></i></el-button>
                </iform>
                <itable ref="combotable" :showSelection="showSelection" @row-click="rowclick" @selection-change="selectionChange"
                :itemList="columnList" :pageInfo="pageInfo"
                :highlightCurrentRow="highlightCurrentRow" @handleChange="handleChange"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
                    <el-table-column v-for="(item) in columnList" :key="item.field" sortable
                                    :prop="item.field" :label="item.title" :width="item.width" align="center">
                    </el-table-column>
                </itable>
                <div class="i-button">
                    <el-button type="primary">确定{{0}}</el-button>
                    <el-button type="primary" @click="clearAllSelect">清空</el-button>
                </div>
            </div>
        </iwhiteBoad>
    </div>
</template>

script

<script>
    import Itable from './i-table.vue';
    import Iform from './i-form.vue';
    import IwhiteBoad from './i-whiteBoad.vue';
    import { EventBus } from '../modules/event-bus';
    import axios from 'axios';
export default {
    name: 'i-combogrid',
    components: { Itable, Iform, IwhiteBoad },
    props: {
        getOptions: { // 接受属性值和参数
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            iconChange: 'el-icon-arrow-down',
            timeValue: '', // 事件戳
            isShowIcon: false,
            columnList: [], // 表头数据
            tableData: [], // 表格数据
            pageInfo: { // 表格分页码
                pageIndex: 1, // 当前页
                pageSize: 10, // 每页行数
                pageTotal: 0 // 页总数
            },
            baseUrl: this.$store.state.url,
            FormData: {}, // combogrid里面的表单的model
            formTypeValue: [], // 表单数据
            tableFramData: {}, // 请求参数
            tableDataUrl: '', // 接口
            getIndex: [],
            width: '688px',
            showSelection: true, // 多选
            highlightCurrentRow: false, // 单选
            rightData: '', // combogrid回调值model
            inputValue: '',
            inputShowValue: '',
            showRearch: true
        }
    },
    created() {
        this.timeValue = this.getOptions.opt.name + '_' + new Date().getTime();
        this.showRearch = this.getOptions.opt.searchArray != [] ? true : false;
    },
    mounted() {
        if (this.getOptions.opt) {
            this.highlightCurrentRow = this.getOptions.opt.singleSelect ? true : false; // 单选还是多选
            this.showSelection = this.highlightCurrentRow ? false : true;
        }
    },
    methods: {
        showCombogrid(e) { // 显示combogrid
            if(this.isShowIcon){
                this.disappear();
            }else{
                this.$refs.whiteBoad.target = e;
                this.isShowIcon = true; 
                this.$refs.whiteBoad.dialogVisible = this.isShowIcon;
                this.iconChange = "el-icon-arrow-upppp"; // 显示隐藏icon
                // 对combogrid进行数据显示
                if (this.getOptions) {
                    var options = this.getOptions,
                        model = options.model;
                    this.tableDataUrl = options.opt.table.tableDataUrl; // 表格数据请求接口
                    this.tableData = options.opt.table.tabledata ? options.opt.table.tabledata : [];
                    this.tableFramData = options.opt.table.tableFramData; // 需要请求的数据
                    this.columnList = options.opt.table.column;
                    this.formTypeValue = options.opt.searchArray ? options.opt.searchArray : []; // combogrid搜索输入框
                    this.tableDataUrl && this.getTableData();
                }
                this.handleScroll(e);
            }
        },
        handleScroll(e) { //滚动防抖去掉combogrid
            EventBus.$on('handleScroll', ({scrollTop}) => {
                e['scrollTop'] = scrollTop;
                let comboinputOffsetTop = this.$refs.comboinput.$parent.$el.offsetParent.offsetTop;
                console.log(scrollTop)
                console.log(comboinputOffsetTop)
                scrollTop >= comboinputOffsetTop ? this.disappear() : this.$refs.whiteBoad.changeWhiteBig(e);
            })
        },
        disappear() { // 点击去掉combogrid
            this.$refs.hasOwnProperty('iform') && this.$refs.iform && this.$refs.iform.disappear()
            this.isShowIcon =false;
            this.$refs.whiteBoad.dialogVisible = false;
            this.$refs.whiteBoad.updateWhite();
            this.iconChange = "el-icon-arrow-down";
            this.formTypeValue = [];
            this.FormData = {};
            EventBus.$off('handleScroll');
        },
        getTableData() { // 获取表数据
            let dataObj = this.tableFramData ? Object.assign({}, this.tableFramData, this.FormData) : this.tableFramData;
            axios({
                url: this.baseUrl + this.tableDataUrl,
                data: JSON.stringify(dataObj),
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
                }
            }).then((data) => {
                this.pageInfo.pageTotal = data.data.result.totalCount;
                this.$refs.combotable.tableData = data.data.result.items;
                this.tableData = this.$refs.combotable.tableData;
            })
        },
        selectionChange(rows) { // 多选选择框
        },
        rowclick(row, column, event) { // 多选
        },
        handleChange(row, radiovlaue) { // 单选
            if (this.highlightCurrentRow) {
                let model = this.getOptions.model.split(".");
                let modelShow = this.getOptions.modelShow;
                this.inputValue = row[model[model.length -1]];
                this.inputShowValue = row[modelShow];
                this.rightData = model[model.length -1];
                EventBus.$emit('handleChange', {
                    rightData:this.rightData,
                    inputValue: this.inputValue + '',
                    inputShowValue: this.inputShowValue
                }); // 事件总线
                radiovlaue && this.disappear();
            }
        },
        handleCurrentChange(val) { // 当前页
            this.pageInfo.pageIndex = val
            this.tableFramData.page = val
            this.getTableData()
        },
        handleSizeChange(val) { // 最大显示页
            this.pageInfo.pageSize = val
            this.tableFramData.rows = val
            this.getTableData()
        },
        clearAllSelect(row) { // 清空
            this.inputValue = '';
            this.rightData = '';
            this.FormData = {};
            this.$refs.combotable.$refs.table.clearHandleChange();
            this.$refs.combotable.$children[1].setCurrentRow(row);
            this.$refs.combotable.$children[1].clearSelection();
        }
    },
}
</script>

style

<style lang="scss" scoped>
    .i-combogrid {
        width: 688px;
        padding: 5px;
        background-color: #fff;
        border-radius: 3px;
    }
    /deep/ .el-input {
        .el-input__inner {
            cursor: pointer;
        }
        .el-icon-arrow-down.el-icon-arrow-upppp {
            transform: rotateZ(180deg);
        }
        .el-icon-arrow-down {
            transition: transform 0.3s linear;
            transform: rotateZ(0);
            width: 25px;
        }
    }
    .i-combogrid {
        /deep/ .el-form {
            .el-form-item {
                .el-input {
                    width: 150px;
                }
            }
        }
        /deep/ .el-table {
            width: 688px;
            height: 300px !important;
            .el-radio__label {
                padding: 0;
            }
        }
    }
    /deep/ .el-table__body tr.select-row {
        background-color:rgb(236, 245, 255);
        color: #fff;
    }
    .i-button {
        margin-top: 10px;
    }
</style>

使用i-combogrid公用组件

封装好了一些使用到的组件之后，使用起来就非常简单，在子组件的data函数里定义combo grid的属性以及数据就可以了。

i-form封装组件的表单数组对象集合

i-form封装组件有两个重要的属性，一个是rightFormData：父级传的或者自己默认的model值。另一个是：formTypeValue： 父级传的或者自己默认的表单集合。formTypeValue就是用来存放各种表单类型的数组对象集合，因此可以在formTypeValue数组对象里定义combogrid、input、select、selects、date、time、combopanel、switch、input_number、input_numbers等表单类型。本文章主要是介绍combogrid表单类型。

i-form封装组件的两个属性

开始使用combogrid

就是下面一段代码，就是这么简单，直接在data函数里定义。

formTypeValue: [
{
     elem: 'combogrid',
     model: 'rightFormData.productTypeDetailCode', // v-model
     modelShow: 'productTypeDetailName',
     label: '产品类型细类',
     opt: {
     name: 'productTypeDetail', 
     singleSelect: false, // 是否单选
     searchArray: [ // 查询表格数据的表单，也可以是嵌套combogrid，就是多级combogrid
         {elem: 'input', label: '产品类型细类代码', model: 'rightFormData.productTypeDetailCode'}, 
         {elem: 'input', label: '产品类型细类名称', model: 'rightFormData.productTypeDetailName'}], 
         table: {
             column: [ // 表头
                 {field: 'productTypeDetailCode', title: '产品类型细类代码'}, 
                 {field: 'productTypeDetailName', title: '产品类型细类名称'}
             ],
             tableDataUrl: 'ProductTypeDetail/SearchList', // 表格数据请求url
             tableFramData: { // 携带的参数
                 page: 1,
                 rows: 10
             }
         }
     }
  }
]

效果图