美文网首页
antd getCheckboxProps 点击全选按钮,禁用错

antd getCheckboxProps 点击全选按钮,禁用错

作者: 大漢帝国 | 来源:发表于2020-04-16 17:36 被阅读0次

    需求:列表支持复选,全选,某些数据复选框禁用

    按ant design vue官网:

    <template>
      <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </template>
    
    
    computed: {
        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,
              },
            }),
          };
        },
      },
    

    问题:全选时,禁用复选框错乱。

    image.png
    解决:由于版本antd更新的原因,给数据加上key属性
    数据:(注意key),若你的数据没有key属性,需对数据进行处理,增加key属性
    const 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',
      },
    ];
    

    相关文章

      网友评论

          本文标题:antd getCheckboxProps 点击全选按钮,禁用错

          本文链接:https://www.haomeiwen.com/subject/oajdvhtx.html