antd vue 使用 modal 关闭后销毁组件

问题：使用 antd vue modal 时，弹框内部是一个table，table里面有 checkbox，checkbox 的 disable 属性取决于子组件，因此每次的 disable 属性值是不一样的。antd table 根据 getCheckboxProps API 来设置 checkbox 属性，但是只有第一次能设置属性，之后都不可以。原因：modal 组件关闭之后，并没有销毁组件，

buling吖

7295人浏览 · 2021-11-23 11:55:14

buling吖 · 2021-11-23 11:55:14 发布

问题：
使用 antd vue modal 时，弹框内部是一个table，table里面有 checkbox，checkbox 的 disable 属性取决于子组件，因此每次的 disable 属性值是不一样的。antd table 根据 getCheckboxProps API 来设置 checkbox 属性，但是只有第一次能设置属性，之后都不可以。

原因：
modal 组件关闭之后，并没有销毁组件，一直保持这一开始的 checkbox 属性，导致后面再次打开 modal ，checkbox 的属性没有相应的改变。

解决办法：
设置 destroyOnClose 属性，关闭时销毁组件，这样重新进入modal时就会根据组件设置 checkbox 属性。

<a-modal title="测试" v-modal="visible" destroyOnClose>
	<a-table
		:columns="columns"
        :dataSource="data"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: getCheckboxProps
        }"
        :rowKey="record => record.key"
        bordered
	></a-table>
</a-modal>