Компонент Vue Grid GridManager Vue

JavaScript

GridManager Vue

Vue на основе Gridmanager Package для удобного использования Gridmanager в Vue. За исключением функций VUE, другие API такие же, как API Gridmanager.

image

реализовать функцию

Функция описывать
регулировка ширины Ширину столбца таблицы можно регулировать перетаскиванием
изменение местоположения Перетащите, чтобы настроить положение столбца таблицы
столбец конфигурации Столбцы могут быть отображены и скрыты конфигурацией
потолок метровой высоты В случае, когда таблица имеет видимую область, заголовок всегда будет находиться вверху.
Фиксированная колонка Указывает, что столбец зафиксирован слева или справа
Сортировать Таблица сортировки по одному элементу или комбинированной сортировки
нумерация страниц Формировать разбиение на страницы ajax, включая выбор общего количества элементов, отображаемых на каждой странице, и переход на указанную страницу.
Память пользовательских настроек Запоминать поведение пользователя, включая настраиваемую пользователем ширину столбца, порядок столбцов, статус видимости столбца и количество полос на странице.
серийный номер Автоматически генерировать столбцы серийных номеров
выбрать все Генерируется автоматически, выбирает все столбцы
экспорт Экспорт статических данных, экспорт динамических данных, экспорт выбранных данных
Распечатать печать текущей страницы
контекстное меню Общие функции могут создавать ярлыки в меню
фильтр Быстрые результаты поиска за счет фильтрации по столбцам
сливаться Ячейки с одинаковым значением в одном столбце могут быть автоматически объединены
стол из дерева Структура таблицы древовидного типа может быть быстро реализована с помощью конфигурации
движение строки Строки можно быстро перемещать с помощью конфигурации

API

Этот документ является документом собственного GridManager, за исключением версии vue вcolumnData.text columnData.template topFullColumn.templateВы можете использовать шаблон vue таким же образом.

Demo

Этот пример является примером собственного GridManager, за исключением версии vue.columnData.text columnData.template topFullColumn.templateВы можете использовать шаблон vue таким же образом.

Core code

среда разработки

ES2015 + webpack + Vue + GridManager

Установить

npm install gridmanager-vue --save

упоминается в проекте

Глобальные компоненты Vue

import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';
Vue.use(GridManagerVue);

Частичные компоненты Vue

import GridManagerVue from 'gridmanager-vue';
import 'gridmanager-vue/css/gm-vue.css';

new Vue({
    el: '#app',
    components: {
        GridManagerVue
    }
});

Пример

<grid-manager :option="gridOption" :callback="callback" ref="grid"></grid-manager>


const app = new Vue({
    el: '#app',
    data: {
        // 表格渲染回调函数
        // query为gmOptions中配置的query
        callback: function(query) {
            console.log('callback => ', query);
        },

        // 表格
        gridOption = {
            // 表格唯一标识
            gridManagerName: 'test-gm',

            // 高度
            height: '300px',

            // 首次是否加载
            firstLoading: false,

            // 列配置
            columnData: [
                {
                    key: 'shopId',
                    width: '180px',
                    text: '店铺id',
                    align: 'center'
                },{
                    key: 'platId',
                    text: '平台',

                    // template=> function: return dom
                    // 参数介绍
                    // platId: 当前行数据中与配置项key相同字段的值
                    // row: 当前行数据
                    // index: 当前行所在数据中的索引值
                    template: (platId, row, index) => {
                        const span = document.createElement('span');
                        span.style.color = 'blue';
                        span.innerText = platId;
                        return span;
                    }
                },{
                    key: 'platNick',
                    text: '店铺名称',

                    // template=> string dom
                    template: `<span style="color: red">跟据相关法规，该单元格被过滤</span>`
                },{
                    key: 'createTime',
                    text: '创建时间',
                },{
                    key: 'updateTime',
                    text: '更新时间',

                    // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项
                    filter: {
                        // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
                        option: [
                            {value: '1', text: 'HTML/CSS'},
                            {value: '2', text: 'nodeJS'},
                            {value: '3', text: 'javaScript'},
                            {value: '4', text: '前端鸡汤'},
                            {value: '5', text: 'PM Coffee'},
                            {value: '6', text: '前端框架'},
                            {value: '7', text: '前端相关'}
                        ],
                        // 筛选选中项，字符串, 默认为''。 非必设项，选中的过滤条件将会覆盖query
                        selected: '3',
                        // 否为多选, 布尔值, 默认为false。非必设项
                        isMultiple: false
                    },
                    // template=> function: return string dom
                    template: updateTime => {
                        return `<span style="color: blue">${updateTime}</span>`;
                    }
                },{
                    key: 'action',
                    text: '操作',
                    width: '100px',
                    align: 'center',

                    // template=> function: return vue template
                    // vue模版中将自动添加row字段，该字段为当前行所使用的数据
                    // vue模版将不允许再使用template函数中传入的参数
                    template:() => {
                        return '<el-button size="mini" type="danger" @click="delRelation(row)">解除绑定</el-button>';
                    }
                }
            ],
            // 使用分页
            supportAjaxPage: true,

            // 数据来源，类型: string url || data || function return[promise || string url || data]
            ajax_data: (settings, params) => {
                return tenantRelateShop(params);
            },

            // 请求失败后事件
            ajax_error: err => {
                console.log(err);
            },

            // checkbox选择事件
            checkedAfter: rowList => {
                this.selectedCheck(rowList);
            },

            // 每页显示条数
            pageSize: 20

            // ...更多配置请参考API
        }
    },
    methods: {
        // 解除绑定
        delRelation: function(row) {
            // ... 解除绑定操作
        }
    }
});

vue-class-component

использоватьvue-class-componentчас,GridManagerЭто используется в относится к классу, а не к Vue. Если вам нужно указать это на vue, вы можете передатьGridManagerЭлементы конфигурации записываются в созданные для достижения.

вызвать публичный метод

Следующие методы необходимо использовать в среде Vue, где уже существует экземпляр gridManager. и использоватьthis.$gridManagerУслуга должна быть пройдена заранееVue.use(GridManagerVue)БудуGridManagerVueЗарегистрируйтесь в глобальном компоненте.

// 推荐使用this.$gridManager方式进行方法调用。
// 刷新
this.$gridManager.refreshGrid('test-gm');  // 或 this.$refs['grid'].$el.GM('refreshGrid', 'test-gm');

// 更新查询条件
this.$gridManager.setQuery('test-gm', {name: 'baukh'});  // 或 this.$refs['grid'].$el.GM('setQuery', 'test-gm', {name: 'baukh'});

// ...其它更多请直接访问API

Посмотреть текущую версию

import GridManagerVue from 'gridmanager-vue';
console.log(GridManagerVue.version);
Категории