html可编辑tree,vue中可编辑树状表格的实现代码

HTML可编辑tree的实现代码：

<ul contenteditable="true">
  <li>节点1
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>节点2</li>
</ul>

Vue中可编辑树状表格的实现代码：

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>类型</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in treeData" :key="item.id">
        <td>
          <span @click="toggleEdit(item)">
            <span v-if="item.edit">{{ item.name }}</span>
            <input v-else type="text" v-model="item.name">
          </span>
        </td>
        <td>{{ item.type }}</td>
        <td>
          <span v-if="item.edit">{{ item.value }}</span>
          <input v-else type="text" v-model="item.value">
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: "节点1",
          type: "string",
          value: "value1",
          children: [
            {
              id: 2,
              name: "子节点1",
              type: "number",
              value: 123,
            },
            {
              id: 3,
              name: "子节点2",
              type: "boolean",
              value: true,
            },
          ],
        },
        {
          id: 4,
          name: "节点2",
          type: "string",
          value: "value2",
        },
      ],
    };
  },
  methods: {
    toggleEdit(item) {
      item.edit = !item.edit;
    },
  },
};
</script>

这里使用了Vue的数据绑定和事件绑定，通过设置`item.edit`属性来控制是否可编辑。同时使用了`v-for`指令来循环渲染表格行。