vue2中画鱼骨图有增加子骨和删除子骨的方法

在Vue2中，如果想要在鱼骨图中增加子骨，可以通过在数据中添加子骨的方式实现。具体步骤如下：

1. 首先，在data中定义一个表示鱼骨图的数组，该数组包含各个主骨的信息，例如：

data() {
  return {
    fishBoneData: [
      { name: '主骨1', children: [] },
      { name: '主骨2', children: [] },
      // 其他主骨及其子骨
    ]
  }
}

2. 当需要增加子骨时，可以通过操作数据来实现。例如，如果要在主骨1下增加一个子骨，可以通过push方法向children数组中添加一个子骨对象：

methods: {
  addChildBone() {
    this.fishBoneData[0].children.push({ name: '子骨1' });
  }
}

3. 在Vue的模板中，可以通过v-for指令来遍历显示主骨的子骨：

<template>
  <div>
    <div v-for="(bone, index) in fishBoneData" :key="index">
      <span>{{ bone.name }}</span>
      <ul>
        <li v-for="(child, childIndex) in bone.children" :key="childIndex">
          {{ child.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

这样，当调用addChildBone方法时，就可以在鱼骨图中增加一个子骨了。

要删除子骨，可以使用splice方法来实现。例如，如果要删除主骨1的第一个子骨，可以使用splice方法将对应的子骨从children数组中删除：

methods: {
  deleteChildBone() {
    this.fishBoneData[0].children.splice(0, 1);
  }
}

同样，在Vue的模板中进行相应的更新即可实现子骨的删除。

综上所述，通过操作数据可以在Vue2中实现鱼骨图的子骨的增加和删除。