资讯专栏INFORMATION COLUMN

vue表格组件

ysl_unh / 1916人阅读

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

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);

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

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

相关文章

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

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

    yedf 评论0 收藏0
  • Vue表格组件--GridManager Vue

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

    khs1994 评论0 收藏0
  • vue初探--编写表格组件

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

    dabai 评论0 收藏0
  • D2 Crud,一款简单易用的表格组件

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

    fevin 评论0 收藏0
  • 一个通用的vue表格组件

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

    caoym 评论0 收藏0

发表评论

0条评论

ysl_unh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<