<Table-A : Columns = "Columns" // Column : dataSource = "tableDatas" // Data : loading = "loading" : the pagination = "the pagination" paging properties // @ 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-Placement the popover = "bottomRight" overlayClassName = "tableBtn"> <Template slot = "title"> <A the href = "JavaScript :;" = @ the 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;
});
},
Original link: cnblogs.com/lvlvlv/p/11543575.html