公司5：JrVue表格

组件名称：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

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