ant-design-vue a-table tab

<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>
Copy the code
Copy the code
// 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: "" }, };
Copy the code
Copy the code
    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

Guess you like

Origin www.cnblogs.com/mp-0518/p/11956051.html