table组件 和 分页组件来自iview，在这里我根据公司业务再次做了一次封装，使用slot进行内容分发，可以随意放置input输入框和button按钮 ，再使用props向子组件传递参数，使用emit属性向父组件传递事件，
github地址：https://github.com/husanfeng/vue-components-web
代码如下
《子组件》
<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>
 
 

vue.js table组件封装的更多相关文章

  1. Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...

  2. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  3. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  8. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  9. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

随机推荐

  1. 3D Computer Grapihcs Using OpenGL - 17 添加相机（旋转）

    在11节我们说过,MVP矩阵中目前只应用了两个矩阵,World to View 矩阵被省略了,这就导致我们的画面没有办法转换视角. 本节我们将添加这一环节,让相机可以旋转. 为了实现这一目的,我们添加 ...

  2. JS深度判断两个数组对象字段相同

    /** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj){ return Object.prototype.toSt ...

  3. java复制项目中的补丁，完整的包路径

    package com.bytter.audit.iface.util; import java.io.BufferedInputStream; import java.io.BufferedOutp ...

  4. pycharm中如何安装使用jieba（结巴）

    PyCharm的安装以及jieba包导入 1.打开Pycharm,点击左上角  >>File  >>Settings 2.在settings界面中点击Project :pyCh ...

  5. modern php笔记---1、新时代的php

    modern php笔记---1.新时代的php 一.总结 一句话总结: php有Zend Engine 和 Facebook开发的 HipHop Virtual Machine两套引擎 1.php也 ...

  6. 将Windows下的文件同步到Linux下

    需求:把Windows下的某些文件自动传送到Linux指定目录下 实现: 1. Windows下安装 WinSCP工具,并把Liunx服务器信息保存 2. 编写脚本,实现双击工具就把Windows下的 ...

  7. Python中的self用法之面向对象

    class Student(object): def __init__(self, name, score): self.__name = name self.__score = score def ...

  8. 将项目发布到neuxs私服

    需要在 pom.xml中配置 <distributionManagement> <repository> <id>user-release</id> & ...

  9. 【python】将json串写入文件,并以json格式读取出来

    写json--json.dumps 代码: import json #要写入文件的json串(dict格式) result ={', 'https://appapi.xxxx.com/appapi/b ...

  10. 关于maven项目 启动页面报错 The type java.io.ObjectInputStream cannot be resolved.

    这种情况,要修改jdk版本,默认jdk选择 jdk不选jre windows---->perference---->java----->installes jres-----> ...