vue甘特图上下拖拽冲突

Question

在vue甘特图中，通过drop上下拖动模块时，希望有冲突的模块能够将该行撑开（例如原行高30px，现在拖拽后产生冲突，则行高变为60px以容纳两行高度）。现在用@drop方法能看到该行数据，但是修改时，出现”Cannot set property offsetHeight of # which has only a getter“的错误，不知道怎么处理

Answer 1

望采纳


如果您使用的是Vue.js，可以通过计算属性来实现您的需求。

首先，您需要在Vue实例中定义一个计算属性，该属性用于计算行的高度，并在需要时更新该值。下面是一个简单的例子：

// 在Vue实例中定义一个计算属性
computed: {
  rowHeight() {
    // 检查是否存在冲突
    if (this.hasConflict) {
      // 如果存在冲突，则将行高设置为原来的两倍
      return this.originalRowHeight * 2;
    } else {
      // 否则，使用原始行高
      return this.originalRowHeight;
    }
  }
}

然后，您可以在模板中绑定该计算属性，以便在拖拽模块时更新行高：

<!-- 绑定行高计算属性 -->
<gantt-row :height="rowHeight"></gantt-row>

在拖拽模块时，只需监听拖拽事件并更新hasConflict变量的值即可。如果存在冲突，则将其设置为true，否则设置为false。当更新该值时，计算属性会自动重新计算行高，并在模板中更新相应的值。