ant design vue 표 table 기본 선택 몇 가지 동작

왜 내 같은 기능 을 react,vue 로 다 써 야 합 니까?
아,나 진짜 한가 한 거 아니 야?
ant design vue 에서 표 의 첫 번 째 열 은 연 결 된 선택 상자 입 니 다.
공식 문서 도 를 캡 처 하면 마지막 줄 이 비활성화 상태 임 을 보 여 줍 니 다.

checkbox 를 누 르 면 onChange 를 터치 하여 selected RowKeys 를 얻 을 수 있 습 니 다.selected RowKeys 는 선택 한 key 배열 입 니 다.

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

기본적으로 disable 항목 을 사용 하지 않 을 때 공식 문서 에서 예 를 들 었 습 니 다.

  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,
     }
    }),
   }
  }

주로 getCheckbox Props 의 disabled 속성 을 제어 합 니 다.
기본적으로 어떤 항목 을 선 택 했 을 때 getCheckbox Props 의 defaultChecked 속성 제어 가 필요 합 니 다.
업무 장면:몇 가지 저장 항목 을 선택 한 후에 다음 에 편집 하 러 들 어 오 면 선택 한 항목 을 보 여 줘 야 합 니 다.이때 기본 선택 속성 을 사 용 했 습 니 다.
그동안 핵심 논리 만 붙 였 는데 많은 사람들 이 못 알 아 본 것 같 아서 전 체 를 붙 였 어 요.
핵심 코드 default Checked:selected RowKeys.includes(record.id)의 사고방식 은 모든 표 에 선 택 된 항목 을 포함 하 는 id 를 기본 으로 선택 하 는 것 입 니 다.

data () {
  return {
   // ... 
   record: '',
   rowSelection: {
    selectedRowKeys: [],
    onChange: this.onSelectChange
   }
 },
 methods: {
   handleEdit (record) {
   //...        
    if (record) {
    //...        
    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 와 default Checked 는 모두 props 속성 에 걸 려 있 습 니 다.
보충 지식:Ant-Design-Pro 에서 Table 구성 요소 rowSelection 방법의 일부 구덩이
다음 과 같다.

구성 요소 에 rowSelection={rowSelection}방법 이 있 습 니 다.Table 의 첫 번 째 열 을 연결 하 는 선택 상자 로 만 들 수 있 습 니 다.
API 에 서 는 rowSelection.selected RowKeys 를 통 해 선택 항목 을 제어 한다 고 합 니 다.비교 구 덩이 는 selected RowKeys 가 제어 하 는 것 은 dataSource 의 현재 순서 번호 일 뿐 입 니 다.
반드시 rowKey="id"또는 rowKey={record=>record.id}를 추가 해 야 합 니 다.나중에 여러 번 디 버 깅 을 통 해 많은 BUG 가 이 매개 변수 와 관련 이 있 는 것 을 발 견 했 습 니 다.그렇지 않 으 면 연 결 된 선택 상자 상태 가 이상 할 수 있 습 니 다.id 는 dataSource 의 어떤 값 으로 사용자 정의 할 수 있 습 니 다.
이상 의 ant design vue 표 table 기본 선택 몇 가지 동작 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.