ant中table表格的多选框如何清空

  • 项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后、重置或者翻页后对多选框清空

  • 使用的组件是ant中下的可操作选择的table;这样我们就知道复选框选中的那些数据id,其实就是selectedRowKeys数组里的id,操作就可控了;

  • 在这里插入图片描述

  • 效果在这里插入图片描述

  • 在这里插入图片描述

.
.
.

  • 主要思路是:在提交后、重置或者翻页后对多选框清空,
this.selectedRowKeys = [];
  • 其中对于已同步的数据,按照正常来说,复选框应该置灰不可选的;但是我没有用table下的可选择复选框那个组件,我自己的办法是,点击选择的时候,会触发多选框的方法onSelectChange;自己手动将未同步的数据选出来,然后赋值给selectedRowKeys;
    onSelectChange(selectedRowKeys) {
      var _self = this;
      var dataIds = [];
      this.data.forEach(ele =>{
        if (ele.status == '未同步') {
          dataIds.push(ele.databaseId);
        }
      })
      // console.log('可选的id',dataIds);
      // console.log('选择了多选框', selectedRowKeys);
      var aaa = []
      dataIds.forEach(ele =>{
        selectedRowKeys.forEach(num =>{
	        if (num == ele) {
	          // console.log(ele);
	          aaa.push(ele);
	        }
	      })
      })
      // this.selectedRowKeys = selectedRowKeys;
      //手动筛选出可选的  赋值给组件的selectedRowKeys 
      this.selectedRowKeys = aaa;
    },
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue Table使用多框的vue3写法如下: 1. 首先,在Table组件添加一个selection-column,用来显示多框。例如: ``` <template> <a-table :columns="columns" :data-source="data"> <a-table-column title="#" dataIndex="id" key="id" /> <a-table-column title="Name" dataIndex="name" key="name" /> <a-table-column title="Age" dataIndex="age" key="age" /> <a-table-column title="Address" dataIndex="address" key="address" /> <a-table-column title="Action" key="action"> <template #default="record"> <a>Invite {{ record.name }}</a> <a-divider type="vertical" /> <a>Delete</a> </template> </a-table-column> <a-table-column title="Select" key="select" :custom-render="(_, record) => { return <a-checkbox v-model:checked="selectedRowKeys.includes(record.key)" @change="handleSelectChange(record.key)" />; }" /> </a-table> </template> ``` 2. 在data函数添加selectedRowKeys数组,用来存储的行的key值。例如: ``` <script> export default { data() { return { data: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park' } ], selectedRowKeys: [] }; }, methods: { handleSelectChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys; } } }; </script> ``` 3. 在Table组件上添加row-selection属性,用来配置多框的行为。例如: ``` <template> <a-table :columns="columns" :data-source="data" :row-selection="{selectedRowKeys, onChange: handleSelectChange}"> ... </a-table> </template> ``` 其,selectedRowKeys用来指定当前的行的key值,onChange函数用来处理行的变化。 以上就是Ant Design Vue Table框vue3写法的示例。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值