Antd-Vue表格中弹出多层Modal 问题解决-小记

1 、问题：

        流程是我的表格中每行带有删除操作，点击删除会弹出Modal对话框。

        但是点击其中一个，便会弹出其他行所有的Modal，而Modal默认开启的遮罩（mask）会逐个加深，最终导致页面全黑，如下图

 

 2、原因

        是因为每行数据都有对应的Modal，但全都由一个变量所控制，所以才会造成点击一个弹出所有Modal的错误。

        正确的做法应该是Modal的弹出都由每行的变量控制，而不是公用一个

3、解决

        我的做法是，每行数据新增布尔字段delVis，再将Modal封装成组件，由props传入当前行的数据，最后判断传入数据的delVis来弹出，这样各行Modal就互不影响了

4、反思

        期间还一度认为是其他原因，甚至通过取消Modal遮罩来解决，但治标不治本。所以定位问题根源一定要找对方向，清楚原因才能更好地解决。

        当然每个人的问题并非相同，所以他人的方法不一定能解决自己问题，因人而异