< A-Table : Columns = "Columns" // column : the dataSource = "tableDatas" // Data : loading = "loading" : the pagination = "the pagination" // Properties tab @change = "handleTableChange" // click tab digital the method of triggering when : rowKey = "tableDatas => tableDatas.id" // identify each row > < span slot = "Action" slot-scope = "text, Record" > // release button operating table < div class = "tabBtn" > < A-the popover Placement = "bottomRight" overlayClassName="tableBtn"> <template slot="title"> <a href="javascript:;" @click="handleAdd(record)" > <i class="iconfont icon-table-edit" />编辑 </a> <a href="javascript:;" @click="deleHostData(record)"> <i class="iconfont icon-tableEmpty" />删除 </a> </template> <span> <i class="iconfont icon-tableMore" /> </span> </a-popover> </div> </span> </a-table>
// Data data in
data () {
return {
the pagination: {
Total: 0,
the pageSize: 10, 10 // display the data on each page
showSizeChanger: to true,
pageSizeOptions: [ "10", "20 is", "50" "100"], // page data displayed in
showTotal: total => `total of $ {total}` of data, data show overall tab //
},
loading: to true,
// query parameters
queryParam: {
page: 1, // first few pages
size: 10, // the number of data per page display bar in
hosName: "",
hosCode: "",
Province: "",
City: ""
},
};
handleTableChange(pagination) {
this.pagination.current = pagination.current;
this.pagination.pageSize = pagination.pageSize;
this.queryParam.page = pagination.current;
this.queryParam.size = pagination.pageSize;
this.getTableList();
},
//调用查询接口为dataSource 赋值
getTableList() {
this.loading = true;
retriveHosData(this.queryParam).then(res => {
if (res.message === "SUCCESS") {
const pagination = { ...this.pagination };
pagination.total = res.data.total;
this.tableDatas = res.data.list;
this.pagination = pagination;
}
this.loading = false;
});
},