ant design for vue 关于table的一些问题

1、为table添加分页: :pagination="pagination"
pagination: {
      defaultPageSize: 10,
      showTotal: (total) => `共${total} 条数据`,
      total: 0,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50'],
      onShowSizeChange: (current, pageSize) => {
        this.pageSize = pageSize;
        this.getTableData();
      },
      onChange: (page, pageSize) => {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getTableData();
      }
    },

2、为table添加序号:在columns中: 添加一行:  {"title": "序号",customRender: (value, row, index) => `${(this.pageNum-1)*10+index+1}`},
    /**pageNum 当前第几页*/

3、 为table添加编辑、删除功能
    <template slot="sensorId" slot-scope="text, record, index">
        <span>
          <a-button @click.native="editTableRow(record)" size="small" type="link">编辑</a-button>
          <a-button @click.native="removeTableRow(record)" size="small" type="link">删除</a-button>
        </span>
    </template>

4、text:该行的值 record:该行的所有数据 index索引(参数分别为当前行的值,当前行数据,行索引)

5、table的选择行属性::row-selection="rowSelection" 既可以获得选择的行的key和行的数据

 computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
 getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // 当列中的name="disable user"时,该列不可用
            name: record.name,
          },
        }),
}
}

}

6、表格排序:

首先设置排序的字段: sortField="dmaketime"

        设置排序的方式:  sortOrder="desc"  desc为降序 ascend为升序

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值