ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作

更新時(shí)間：2020年10月31日 15:48:26 作者：喝著綠茶的貓

這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

為什么我同樣的功能要用react 、vue 都寫一遍？

啊我真是不是閑的蛋疼啊(～ o ～)~zZ

在 ant design vue 中，表格的第一列是聯(lián)動(dòng)的選擇框

截一張官方文檔圖，圖示最后一排就是禁用狀態(tài)

點(diǎn)擊 checkbox 會(huì)觸發(fā)onChange , 從而得到selectedRowKeys,selectedRowKeys就是選中的 key 數(shù)組。

 onChange: (selectedRowKeys, selectedRows) => {
  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
 },

默認(rèn)禁用disable 某項(xiàng)時(shí)，官方文檔給出了例子：

  rowSelection() {
   const { selectedRowKeys } = this;
   return {
    onChange: (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
     props: {
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
     }
    }),
   }
  }

主要是getCheckboxProps 里面的disabled 屬性控制的。

默認(rèn)選中某項(xiàng)時(shí)，需要 getCheckboxProps 里面的defaultChecked 屬性控制：

業(yè)務(wù)場(chǎng)景：勾選了幾項(xiàng)保存之后，下次進(jìn)來編輯還是需要展示之前勾選的項(xiàng)，這時(shí)候就用到了默認(rèn)勾選的屬性

之前只貼了核心邏輯，好多人好像沒看懂，我把整體的都貼上來了。

核心代碼defaultChecked: selectedRowKeys.includes(record.id) 的思路就是所有表格里所有包含已選中項(xiàng)的id，都給他默認(rèn)選中

data () {
  return {
   // ... 
   record: '',
   rowSelection: {
    selectedRowKeys: [],
    onChange: this.onSelectChange
   }
 },
 methods: {
   handleEdit (record) {
   //...省略我的業(yè)務(wù)邏輯
    if (record) {
    //...省略我的業(yè)務(wù)邏輯
    let selectedRowKeys =
     (record.roleIdList.length > 0 && record.roleIdList.split(',')) || [];
    this.rowSelection = {
     selectedRowKeys: selectedRowKeys,
     onChange: this.onSelectChange,
     getCheckboxProps: record => {
      return {
       props: {
        defaultChecked: selectedRowKeys.includes(record.id)
       }
      };
     }
    };
   } else {
    this.record = '';
    this.rowSelection = {
     selectedRowKeys: [],
     onChange: this.onSelectChange
    }
   }

 },
 onSelectChange (selectedRowKeys) {
   // 去重 Array.from(new Set(arr))
   this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys));
 }
 }

ant design vue 版本和 react 版本寫法略有不同，disabled 和 defaultChecked 都掛在了props 屬性下。

補(bǔ)充知識(shí)：Ant-Design-Pro中Table組件rowSelection方法的一些坑

如下所示：

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

在 <Table/> 組件中有 rowSelection={rowSelection} 方法，可以讓Table的第一列成為聯(lián)動(dòng)的選擇框。

API中說到通過 rowSelection.selectedRowKeys 來控制選中項(xiàng)。比較坑的是，selectedRowKeys 控制的只是dataSource當(dāng)前的順序編號(hào)。

一定要加上rowKey="id"或者rowKey={record => record.id}，后來經(jīng)過多次調(diào)試發(fā)現(xiàn)很多BUG都跟這個(gè)參數(shù)有關(guān)，不然會(huì)導(dǎo)致聯(lián)動(dòng)的選擇框狀態(tài)異常。id可以自定義為dataSource中的某個(gè)值。

以上這篇ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: