vue 组件自定义

基于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>