element-ui的Dialog 对话框打开加载速度慢

我在一个表格里面，嵌套了按钮，点击按钮触发打开Dialog 对话框，然而发现页面数据一多（就10条左右）他就会明显变慢，还发现Dialog 对话框的边缘有黑边

经过一通研究，发现原因是由于，表格循环的时候每一个Dialog 对话框，的visible属性（bool类型用于判断该对话框的显示状态）绑定的变量是一个固定的值，

:visible.sync="A"

这会使得该表格每一行的Dialog 对话框的显示状态都由这一个A变量来控制，所以每次点击打开按钮的时候，会打开该页面所有Dialog 对话框，也因此会有严重的黑边，因为多个重叠了。

知道了原因，解决办法就很简单了,下面是关键位置的代码

Dialog的属性
:visible.sync="ArrVisible[该次表格循环的索引或者id]"


data(){
    return {
        ...
        ArrVisible:[]
        ...
    }
}


methods: {
    //   页面dom容器创建时调用
    fetchData() {
        ...
      //发请求
      getList(this.page,this.pageSize).then(response => {
        // console.log(response)
        const furnitures = response.data.furnitures
        this.list = furnitures
        //以上是拿到了表格的数据

        //类似哈希数组的思想，索引为ID值的空间内存，该ID对应的模态框的值
        const ArrVisible = []
        furnitures.forEach(F => {
          ArrVisible[F.furnitureId] = false
        })
        this.ArrVisible = ArrVisible
        ...
      })
    },
    //打开时触发
     OpenDialog(row){
      this.ArrVisible[row.furnitureId] = true
    ...
    }
}