table 组件 和 分页组件来自 iview, 在这里我根据公司业务再次做了一次封装, 使用 slot 进行内容分发, 可以随意放置 input 输入框和 button 按钮 , 再使用 props 向子组件传递参数, 使用 emit 属性向父组件传递事件, 代码如下
子组件
- <template>
- <div style="">
- <div class="search-bar run-search-bar" style="background:none;">
- <div>
- <!-- align="right" style="margin:5px" -->
- <slot name="handle-bar"></slot>
- </div>
- <div>
- <slot name="search-bar"></slot>
- </div>
- </div>
- <div class="single-table-con">
- <div class="table-bar">
- <slot name="table-bar"></slot>
- </div>
- <Table size="small" ref="table" :loading="loading" @on-current-change="onCurrentChange" :highlight-row="highlightRow" :data="tableData" :columns="tableColumns" @on-selection-change="selectionChange" @on-sort-change="sortHandle" @on-row-click="rowClickHandle" stripe></Table>
- <div style="margin: 10px;overflow: hidden" v-if="isPage">
- <div style="float: right;">
- <Page :placement="placement" :total="total" :show-total="showTotal" :page-size-opts="pageSizeOpts" :show-sizer="showSizer" :page-size="param.page.pageSize" :current="param.page.currentPage" @on-change="changePage" size="small" @on-page-size-change="changePageSize"></Page>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "EasyvueTable",
- components: {},
- props: {
- resource: {
- type: Array,
- default() {
- return [];
- }
- },
- useCatch: {
- type: Boolean,
- default() {
- return false;
- }
- },
- catchParams: {
- type: Object,
- default() {
- return {};
- }
- },
- highlightRow: {
- type: Boolean,
- default() {
- return false;
- }
- },
- action: {
- type: String,
- default() {
- return "";
- }
- },
- params: {
- type: Object,
- default() {
- return {};
- }
- },
- server: {
- type: Object,
- default() {
- return {};
- }
- },
- columns: {
- type: Array,
- default() {
- return [];
- }
- },
- columnsFn: {
- type: Function
- },
- initParam: {
- type: Object,
- default() {
- return {};
- }
- },
- loadCallback: {
- type: Function,
- default() {
- return function(data) {
- };
- }
- },
- autoFirst: {
- type: Boolean,
- default() {
- return true;
- }
- },
- pageSize: {
- type: Number,
- default() {
- return 10;
- }
- },
- showTotal: {
- type: Boolean,
- default() {
- return true;
- }
- },
- showSizer: {
- type: Boolean,
- default() {
- return true;
- }
- },
- pageSizeOpts: {
- type: Array,
- default() {
- return [10, 20, 50, 100];
- }
- },
- isPage: {
- type: Boolean,
- default() {
- return true;
- }
- },
- onSelectionChange: {
- type: Function
- },
- rowClickHandle: {
- type: Function
- }
- },
- data() {
- return {
- tableData: [],
- tableColumns: [],
- total: 0,
- currentPage: 1,
- selection: [],
- loading: false,
- param: {
- page: {
- currentPage: 1,
- // pageNum: 0,
- pageSize: this.pageSize
- },
- params: this.params,
- sortDTO: {
- fieldName: "",
- orderBy: ""
- }
- },
- messageJob: undefined,
- isSelectionChange: false,
- currentRow: undefined
- };
- },
- computed: {
- placement() {
- let pageTotal = 0;
- if (this.total % this.pageSize == 0) {
- pageTotal = this.total / this.pageSize;
- } else {
- pageTotal = this.total / this.pageSize + 1;
- }
- pageTotal = parseInt(pageTotal);
- return this.total % this.pageSize <3 && this.currentPage == pageTotal
- ? "bottom"
- : "top";
- },
- lang() {
- return $store.state.lang;
- }
- },
- created: function() {
- if (!!this.action && this.autoFirst) {
- this.load(this.initParam);
- } else if(!this.action) {
- this.loadLocal();
- }
- for (let c of this.columns) {
- if (!~"selection".indexOf(c.type)) {
- c.ellipsis = true;
- }
- }
- this.getColumns();
- },
- beforeMount: function() {},
- mounted: function() {},
- beforeDestroy: function() {},
- destroyed: function() {},
- methods: {
- onCurrentChange(currentRow, oldCurrentRow) {
- this.currentRow = Object.assign({}, currentRow);
- },
- getHighlightRow() {
- return this.currentRow;
- },
- getColumns() {
- if (typeof this.columnsFn == "function") {
- this.tableColumns = [].concat(this.columnsFn());
- } else {
- this.tableColumns = [].concat(this.columns);
- }
- },
- refresh() {
- this.param.page.currentPage = 1;
- this.$nextTick(() => {
- this.load();
- });
- },
- load(param = {}, page) {
- this.selection = [];
- for (let p in param) {
- this.param.params[p] = param[p];
- }
- this.loading = true;
- if (!!page && typeof page == "number") {
- this.param.page.currentPage = page;
- }
- this.param.page.recordCount = this.total;
- !!this.action ? this.loadAjax() : this.loadLocal();
- },
- loadLocal() {
- this.loadCallback(this.resource);
- if (!this.isPage) {
- this.$nextTick(() => {
- this.tableData = [].concat(this.resource);
- this.loading = false;
- });
- return;
- }
- this.total = this.resource.length;
- let start = (this.param.page.currentPage - 1) * this.param.page.pageSize;
- let end = start + this.param.page.pageSize;
- end = this.resource.length> end ? end : this.resource.length;
- this.tableData = [];
- for (let i = start; i <end; i++) {
- this.tableData.push(this.resource[i]);
- }
- this.$nextTick(() => {
- this.loading = false;
- });
- },
- loadAjax() {
- if (this.server[this.action]) {
- this.server[this.action](this.param).then(res => {
- this.loading = false;
- if (!res) return;
- this.currentPage = res.data.pageNum;
- this.total = res.data.total;
- this.tableData = [];
- let _list = [];
- this.loadCallback(res.data.list);
- for (let item of res.data.list) {
- this.tableData.push(item);
- }
- });
- } else {
- $store.dispatch(this.action, this.param).then(res => {
- this.loading = false;
- if (!res) return;
- this.currentPage = res.data.pageNum;
- this.total = res.data.total;
- this.tableData = [];
- let _list = [];
- this.loadCallback(res.data.list);
- for (let item of res.data.list) {
- this.tableData.push(item);
- }
- });
- }
- },
- changePage(page) {
- this.param.page.currentPage = page;
- this.load();
- },
- changePageSize(page) {
- this.param.page.pageSize = page;
- this.load();
- },
- selectionChange(selection) {
- this.isSelectionChange = true;
- this.selection = selection;
- if (typeof this.onSelectionChange == "function") {
- this.onSelectionChange(selection);
- }
- this.$emit("on-selection-change",selection);
- },
- getSelectioned() {
- return this.isSelectionChange ? this.selection : undefined;
- },
- sortHandle(obj) {
- this.param.sortDTO.fieldName = obj.key;
- this.param.sortDTO.orderBy = obj.order;
- if (this.param.sortDTO.orderBy == "normal") {
- this.param.sortDTO = {
- fieldName: "",
- orderBy: ""
- };
- }
- this.refresh();
- },
- getSortData() {
- return this.param.sortDTO;
- },
- getTableObj() {
- return this.$refs["table"];
- }
- },
- watch: {
- lang() {
- this.getColumns();
- },
- resource(newVal, oldVal) {
- this.resource = newVal;
- }
- },
- directives: {}
- };
- </script>
- <style lang="less" scoped>
- </style>
使用如下:(如有疑问随时联系博主)
父组件
<template>
<div class="run-mod-box">
<EasyVueTable:params="searchForm" ref="BankInfoTable" :server="server" action="queryBanks" :columns="columns" :initParams="searchForm" :highlight-row="true" @on-selection-change="onSelectionChange">
<Form :model="searchForm" ref="searchForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
<Form-item prop="vendorName" label="供应商名称">
<Input type="text" v-model="searchForm.vendorName" size="small"></Input>
</Form-item>
<Form-item prop="bankName" label="开户行">
<Input type="text" v-model="searchForm.bankName" size="small"></Input>
</Form-item>
</Form>
<div slot="handle-bar">
<Button size="small" @click.native="search" type="warning" icon="search"> 搜索 </Button>
<Button size="small" @click.native="reset" type="info" icon="loop"> 重置 </Button>
</div>
</EasyVueTable>
</div>
</template>
来源: https://www.cnblogs.com/husfBK/p/9385429.html