vue.js table组件封装

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>