组件名称：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
此样式负责将表格渲染成久蓉标准里规定的配色。