基于iview的自定义table组件
一 业务要求
1.展示列表字段信息.
2.列表数据的增删查改 与 导出
3.列表的分页功能
二 组件代码实现
html
<template>
<div class="table-wrap">
<Table
ref="table"
:data="arrList"
:columns="currColumns"
:loading="loading"
no-data-text="暂时没有数据"
@on-selection-change="handleSelectChange"
></Table>
<div class="table-page" v-show="pageable">
<!-- <span>{{ page.currPageSize }}</span> -->
<Page
:total="page.currTotal"
:pageSize="page.currPageSize"
:current="page.currCurrent"
show-total
show-elevator
@on-change="pageChange"
>
<span>共计 {{ page.currTotal }} 条</span>
<span>{{ pageNum }} 条 / 页</span>
</Page>
</div>
</div>
</template>
js
<script>
export default {
name: "dtTable",
props: {
url: String,
params: {
type: Object,
default() {
return {};
}
},
columns: {
type: Array,
default() {
return [];
}
},
pageable: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false,
currUrl: this.url,
currParams: this.params,
currColumns: this.columns,
arrList: [],
page: {
currTotal: 0,
currCurrent: 1,
currPageSize: 10
},
selection: [],
pageNum: "",
total_count: ""
};
},
watch: {
arrList(val) {
this.pageNum = val.length;
},
params(val) {
this.currParams = val;
this.page.currCurrent = 1;
this.getList();
// this.pageNum = val.length;
}
},
computed: {},
mounted() {
this.getList();
},
methods: {
getList() {
this.selection = [];
this.loading = true;
var param = Object.assign({}, this.currParams, {
page_now: this.page.currCurrent
});
this.$http.post(this.currUrl, param).then(res => {
this.loading = false;
this.arrList = res.data.list;
console.log(this.arrList);
this.page.currTotal = Number(res.data.total_count);
});
},
pageChange(num) {
this.page.currCurrent = num;
this.getList();
},
handleSelectChange(selection) {
this.selection = selection;
this.getSelect();
},
// 返回选中数组,默认是id
getSelect(key = "id") {
this.selection.map(item => item[key]);
return this.selection;
}
}
};
</script>