组件名称:jr-dynamic-query-table

组件布局

table组件名称:  jr-dynamic-query-table

分页组件名称: el-pagination

<div ref="table001" style="white">

<jr-dynamic-query-table

:columns="columns"

:data="content"

:border="true"

:stripe="true"

tooltip-effect="dark"

:selection="selection"

:height="tableHeight"

size="mini"

@selection-change="handleSelectionChange"

@row-dblclick="handleEdit"

class="jr-table-erp"

></jr-dynamic-query-table>

<div style="text-align: right;padding: 10px 0">

<el-pagination

@current-change="handleCurrentChange"

:current-page="page + 1"

:page-size="size"

layout="prev, pager, next, jumper"

:page-count="totalPages"

background

></el-pagination>

</div>

</div>

组件相关方法

1table高度自动计算的方法

async resizeTable() {

const { height, page, size } = await this.autoPagination({

ref: "table001",

minus: 102,

currentPage: this.page,

currentSize: this.size

});

this.tableHeight = height;

this.page = page;

this.size = size;

this.search();

}

该方法首次需要在amount里调用一次

async mounted() {

//await this.init();

await this.resizeTable();

}

需要配合v-resize使用

<template>

<div v-resize:throttle.1000="resizeTable">

...

</div>

</template>

使用实例:

<template>

<jr-dynamic-query-table

:data="data"

:columns="columns"

@change="handleChange"

@selection-change="handleSelectionChange"

@sort-change="handleSortChange"

size="mini"

:stripe="true"

class="jr-table-erp" />

</template>

<script>

import '../../JrVue';

export default {

data() {

return {

data: [

{

id: '0',

name: 'ytm',

sex: 'male',

birthday: '1990-09-03',

},

{

id: '1',

name: 'stm',

sex: 'female',

birthday: '1990-01-12',

},

],

columns: [

{ type: 'checkbox', align: 'center' },

{

type: 'filter',

prop: 'name',

label: 'name',

headerAlign: 'center',

sortable: 'custom',

},

{

type: 'select',

label: 'sex',

prop: 'sex',

headerAlign: 'center',

sortable: 'custom',

options: [

{ id: 'male', name: 'male' },

{ id: 'female', name: 'female' },

],

},

{

label: 'birthday',

prop: 'birthday',

sortable: 'custom',

headerAlign: 'center',

},

{

label: 'operation',

defaultSlot: ({ row }) => (

<el-button

type="danger"

size="mini"

onClick={() => window.console.log(row)}

>

删除

</el-button>

),

},

],

};

},

methods: {

handleChange(operators) {

window.console.log(JSON.stringify(operators));

},

handleSelectionChange(selection) {

window.console.log(selection);

},

handleSortChange(options) {

window.console.log(options);

},

},

};

</script>

<style>

</style>

展示内容:

Api说明

jr-dynamic-query-table是对el-table的一层薄封装,兼容el-table的所属属性和事件,此文档只讲解和el-table的不同之处。

el-table的使用文档参考:http://element.eleme.io/#/zh-CN/component/table

扩展属性:columns

columns是一个数组,用来取代el-column, 它支持el-column的所有属性和事件,区别是这里必须使用vue-jsx语法。

columns有一个特殊参数,type, 可选取值为checkbox, select, filter

其中checkbox类型的列会被解析为复选框。

select列被解析为多选,需要提供options列参数,提供选项。options参数格式为{id, name}

filter列被解析为动态查询列

columns通过defaultSlot属性自定义单元格内容,它相当于el-column的default插槽。

扩展事件:change

返回一个动态查询数组,用来配合后端动态查询功能。

定制样式:jr-table-erp

此样式负责将表格渲染成久蓉标准里规定的配色。

公司5:JrVue表格的更多相关文章

  1. element el-table表格的vue组件二次封装(附表格高度自适应)

    基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...

  2. Oracle、MySql、SQLServer数据分页查询

    看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...

  3. EBS中使用JAVA方式发送HTML格式邮件

    转自huan.gu专栏:http://blog.csdn.net/gh320/article/details/17174769 EBS中使用JAVA方式发送HTML格式邮件 一.开发工具:JDevel ...

  4. 如何打造千万级Feed流系统

    from:https://www.cnblogs.com/taozi32/p/9711413.html 在互联网领域,尤其现在的移动互联网时代,Feed流产品是非常常见的,比如我们每天都会用到的朋友圈 ...

  5. 008杰信-创建购销合同Excel报表系列-1-建四张表

    本博客的内容来自于传智播客: 我们现在开始要做表格了,根据公司要求的表格的形式,来设计数据库.规划针对这个表格要设计几张表,每张表需要哪些字段. 根据公司原有的表格,设计数据库: 原有的表格

  6. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  7. PDF 相关操作

    去年一年偷了下懒, 博客写了一点就没写了, 还好一些大的flag完成了.  花了半年的空余时间, 培养了一门兴趣爱好.   自己在为人处世上还是不够圆滑啊, 也难怪.   自己当初选择走技术这条路的初 ...

  8. 云原生时代的DevOps平台设计之道

    开发人员与运维人员是 IT 领域很重要的两大人群,他们都会参与到各种业务系统的建设过程中去.DevOps 是近年间火爆起来的一种新理念,这种理念被很多人错误的解读为"由开发人员(Dev)学习 ...

  9. 百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里?

    好多人在问:如何将百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里? 现在,很多人都在网络上找商家,联系业务. 百度地图里有很多的商家联系 ...

随机推荐

  1. 解决在使用Amoeba遇到的问题

    最近有同行在使用Amoeba 的过程中多少遇到了一些问题. 总结一下遇到问题的解决方法: 1.读写分离的时候设置的在queryRouter中设置无效? 读写分离配置的优先级别:        1)满足 ...

  2. tarjan 割点 割边

    by   GeneralLiu tarjan 求 割点 割边 无向图  的 割点 割边: 对于无向连通图来说, 如果删除   一个点以及与它相连的边   之后, 使得这个图不连通, 那么该点为割点 : ...

  3. [BZOJ1179] [Apio2009]Atm(tarjan缩点 + spfa)

    传送门 题意 N个点M条边的有向图 每个点有点权 从某一个结点出发 问能获得的最大点权和 一个点的点权最多被计算一次 N<=500000 M<=500000 思路 先tarjan缩点,然后 ...

  4. java springMVC 极致验证 非demo版

    最近公司项目需要,做了个极致验证,自己在此做下记录. 先上效果图: 它的官网:http://www.geetest.com/   里面有 身份验证.行为验证,  我这使用的为行为验证. 技术文档:ht ...

  5. bzoj 2588 Spoj 10628. Count on a tree (可持久化线段树)

    Spoj 10628. Count on a tree Time Limit: 12 Sec  Memory Limit: 128 MBSubmit: 7669  Solved: 1894[Submi ...

  6. linux 常见名词及命令(四)

    yum仓库的配置 yum仓库的配置文件存放在/etc/yum.repos.d/目录中. 第一步:切换到/etc/yum.repos.d/目录中. 第二步:使用vim编辑器打开一个名为'rhel7.re ...

  7. Java利用jacob实现文档格式转换

    实现文档格式之间的转换,我使用的是jacob-1.7版本,需要jacob.jar来调用activex控件,本机需安装WPS/office,还需要jacob.jar以及jacob.dll 其中:    ...

  8. ViewFlipper实现ViewPager的页面切换效果

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  9. [Web Analytics] Into to Web Analytics

    Just to get started for myself. Any developer who doesn't care about the business is not a good soft ...

  10. C# VS如何整个项目中查找字符串

    Ctrl+F打开查找对话框,然后输入查找字符串,电机右边的小三角,选择整个解决方案,就可以遍历所有文件查找指定字符了