vue表格组件

ysl_unh 发布于2019-08-26 12:10 / 1948人阅读

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。非必设项，选中的过滤条件将会覆盖否为多选布尔值默认为。刷新更新查询条件其它更多请直接访问查看当前版本

GridManager Vue

基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManager API相同。

API

该文档为GridManager的文档，除了columnData中存在差异外，其它使用方式相同。

API

Demo

带搜索的表格

Core code

GridManager

jTool

开发环境

ES2015 + webpack + Vue + gridmanager

安装

npm install gridmanager-vue --save

使用 Vue全局组件

import GridManager from "gridmanager-vue";
Vue.use(GridManager);

Vue局部组件

import GridManager from "gridmanager-vue";

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

示例

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

    // 高度
    height: "300px",

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

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

            // template=> function: return dom
            template: platId => {
                const span = document.createElement("span");
                span.style.color = "blue";
                span.innerText = platId;
                return span;
            }
        },{
            key: "platNick",
            text: "店铺名称",

            // template=> string dom
            template: `跟据相关法规，该单元格被过滤`
        },{
            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 `${updateTime}`;
            }
        },{
            key: "action",
            text: "操作",
            width: "100px",
            align: "center",

            // tempalte中使用了vue模块，则必须将参数useCompile配置为true，否则vue模版将不会解析。
            useCompile: true,

            // template=> function: return vue template, 需配置useCompile=true
            // vue模版中将自动添加row字段，该字段为当前行所使用的数据
            // vue模版将不允许再使用template函数中传入的参数
            template:() => {
                return "解除绑定";
            }
        }
    ],
    // 使用分页
    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
};

调用公开方法

GM对象挂在Element.prototype上，这里是通过vue方式获取table dom。无论通过哪种方式，只要获取到table dom就可通过GM函数调用方法。

// 刷新
this.$refs["grid"].$el.GM("refreshGrid");

// 更新查询条件
this.$refs["grid"].$el.GM("setQuery", this.searchForm);

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

查看当前版本

import GridManager from "gridmanager-vue";
console.log("GridManager", GridManager.version);

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108153.html

基于vue.js实现树形表格的封装

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。基于vue.js实现树形表格的封装（vue-tree-table）前言由于公司产品（基于vue.js）需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个...

yedf 2019-08-26 12:09 评论0 收藏0
Vue表格组件--GridManager Vue

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManag...

khs1994 2019-08-23 16:46 评论0 收藏0
vue初探--编写表格组件

摘要：容器里面包含部分，其一为提供过滤器的入口其二为表格组件。数据绑定，简写形式为在父组件和子组件的通讯中，必须要在子组件里面声明。如果是编写则必须是注册组件的语法糖。下次还是上动图吧以后基本上碰到这种使用表格呈现数据的组件。在项目当中，经常会有表格组件，包含2部分，其一为table-header,其二为table-content 然后在这个小demo里面涉及到了vue的个别指令: v-f...

dabai 2019-08-19 17:12 评论0 收藏0
D2 Crud，一款简单易用的表格组件

摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改...

fevin 2019-08-23 11:43 评论0 收藏0
一个通用的vue的表格组件

摘要：在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及...

caoym 2019-08-21 16:49 评论0 收藏0