vue.js table组件封装
Posted 风随心动*
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js table组件封装相关的知识，希望对你有一定的参考价值。
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>
以上是关于vue.js table组件封装的主要内容，如果未能解决你的问题，请参考以下文章