Ant Design Vue1.7.8中table多选,table选择后进行操作,table可控的筛选,完成后清空选择,通过 rowSelection.selectedRowKeys 来控制选中项。

分解

第一步:页面html部分

   <a-table bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: 
       onSelectChange, getCheckboxProps: getCheckboxProps}" >
    </a-table>
      <div>
        已勾选数量:{
  
   
   {selectedRowKeys.length}}
      </div>

 第二步:多选  获取选中的值

   /**多选  获取选中的值 */
    onSelectChange (selectedRowKeys,selectedRows) {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`,'selectedRows: ',selectedRows,);
      this.codes=selectedRows.map(item => item.code)
      this.selectedRowKeys=selectedRowKeys;
    },

 第三步:初始化获取每一项的值,页面显示状态跟

猜你喜欢

转载自blog.csdn.net/qq_39695210/article/details/128576171