GridManager Vue

npm install gridmanager-vue --save

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

<link rel="stylesheet" href="../node_modules/gridmanager-vue/css/gm-vue.css">
<script src="../node_modules/gridmanager-vue/js/gm-vue.js"></script>

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

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

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

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

const app = new Vue({
    el: '#app',
    data: {
        // Функция обратного вызова для рендеринга таблицы
        // query — это параметр конфигурации gmOptions
        callback: function(query) {
            console.log('callback => ', query);
        },

        // Таблица
        gridOption = {
            // Уникальный идентификатор таблицы
            gridManagerName: 'test-gm',

            // Высота
            height: '300px',

            // Загружать ли данные при первом отображении
            firstLoading: false,

            // Конфигурация столбцов
            columnData: [
                {
                    key: 'shopId',
                    width: '180px',
                    text: 'Идентификатор магазина',
                    align: 'center'
                },{
                    key: 'platId',
                    text: 'Платформа',

                    // template=> функция: возвращает dom
                    // Описание параметров
                    // platId: значение поля, совпадающего с ключом конфигурации в текущих данных строки
                    // row: текущие данные строки
                    // index: индекс текущей строки в данных
                    template: (platId, row, index) => {
                        const span = document.createElement('span');
                        span.style.color = 'blue';
                        span.innerText = platId;
                        return span;
                    }
                },{
                    key: 'platNick',
                    text: 'Название магазина',

                    // template=> строка dom
                    template: `<span style="color: red">Согласно соответствующему законодательству, эта ячейка была отфильтрована</span>`
                }
            ]
        }
    }
}); createTime: '创建时间',
updateTime: '更新时间',  

// 表头筛选条件, 该值由用户操作后会将选中的值以{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>`;
},  

action: '操作',
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,

ajaxData: (settings, params) => {
    return tenantRelateShop(params);
},

ajaxError: err => {
    console.log(err);
},

checkedAfter: rowList => {
    this.selectedCheck(rowList);
},

pageSize: 20,

// ...更多配置请参考API

methods: {
    delRelation: function(row) {
        // ... 解除绑定操作
    }
}
});

### О конфигурации в этом указателе
Возможно, это вызовет ошибку в этом указании:
* Таблица конфигурации в данных, конфигурация внутри функции не указывает на VueComponents.
* При использовании объявления класса конфигурация внутри функции указывает на класс, а не на VueComponents.

Решение:
Вы можете реализовать это, поместив конфигурацию в созданный раздел, например:

### Вызов общедоступных методов
Используя синтаксис ES6, импортируйте GridManager и $gridManager, если вы используете службу this.$gridManager, вам необходимо зарегистрировать GridManagerVue в глобальном компоненте с помощью Vue.use(GridManager).
```javascript
import GridManager, { $gridManager } from 'gridmanager-vue';
Vue.use(GridManager);
// Обновить
GridManager.refreshGrid('test-gm'); // или this.$gridManager.refreshGrid('test-gm');

// обновить условие поиска
GridManager.setQuery('test-gm', {name: 'baukh'});  // или this.$gridManager.setQuery('test-gm', {name: 'baukh'});

// ...другие, пожалуйста, обратитесь непосредственно к API

import GridManager, {$gridManager} from 'gridmanager-vue';
console.log('Версия GridManager Vue =>', GridManager.version);
console.log('Основная версия библиотеки GridManager =>', $gridManager.version);