ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.84k stars 443 forks source link

[Table-column Attributes] Error select all when set selectable is false. #1055

Open ngoctienvc opened 4 years ago

ngoctienvc commented 4 years ago

Description:

I had created a version demo for selection all. when i set to attributes column: selectable is false then display select all is wrong. Same image attach Capture ` and when i tick into input check selection check all then row disabled miss is-checked. Capture2

ngoctienvc commented 4 years ago
constructor(props) {
    super(props);
    this.tblRef = React.createRef();
    this.state = {
      columns: [
        {
          type: 'selection',
          selectable: row => {
            return row.disabled ? false : true;
          }
        },
        {
          label: 'Date',
          prop: 'date',
          width: 150
        },
        {
          label: 'Name',
          prop: 'name',
          width: 160
        },
        {
          label: 'Address',
          prop: 'address'
        }
      ],
      data: [
        {
          date: '2016-05-03',
          name: '123',
          address: 'No. 189, Grove St, Los Angeles',
          disabled: true
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }
      ]
    };
  }
  componentDidMount() {
    this.toggleSelection([this.state.data[0], this.state.data[1]]);
  }
  toggleSelection(rows) {
    if (rows) {
      rows.forEach(row => {
        this.tblRef.toggleRowSelection(row);
      });
    } else {
      this.tblRef.clearSelection();
    }
  }

  render() {
    const { columns, data } = this.state;
    return (
      <Table
        ref={elm => (this.tblRef = elm)}
        style={{ width: '100%' }}
        columns={columns}
        data={data}
        border={true}
        height={250}
        onSelectChange={selection => {
          console.log(selection);
        }}
        onSelectAll={selection => {
          console.log(selection);
        }}
      />
    );
  }