<span v-if="item.protocolNo"> {{ item.protocolNo }} </span> <span v-else>-</span> <span> | </span> <span v-if="item.protocolVersion"> {{ item.protocolVersion }} </span> <span v-else>-</span> <span> | </span> <span v-if="!item.developmentStatus && item.developmentStatus === 1"> 研发中 </span> <span v-if="!item.developmentStatus && item.developmentStatus === 2"> 研发完成 </span> <span v-else>-</span> 代码优化 代码展示

<span v-if="item.protocolNo">{{ item.protocolNo }}</span>
<span v-else>-</span>
<span> | </span>
<span v-if="item.protocolVersion">{{ item.protocolVersion }}</span>
<span v-else>-</span>
<span> | </span>
<span v-if="item.developmentStatus === 1">研发中</span>
<span v-else-if="item.developmentStatus === 2">研发完成</span>
<span v-else>-</span>

这是重新编写的代码，主要是将第三个span的判断条件改为使用else-if指令，同时去掉了判断条件中的“!item.developmentStatus &&”部分，因为它会导致判断条件永远为false。此外，还将代码中的空格和排版做了一些调整，以使其更易读。

相关问题

但是我的子组件是这样的： <div> <template v-for="(item, index) in menuList"> <!-- 无子菜单 --> <a-menu-item :key="item.key" v-if="!item.children"> <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </a-menu-item> <!-- 有子菜单 --> <a-sub-menu :key="item.key" v-else-if="item.children && item.children.length > 0" > <template #title> <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </template> </a-sub-menu> </template> </div>

如果你的子组件中需要使用 `v-for` 来渲染 `<a-menu-item>` 和 `<a-sub-menu>`，并且遵循 Vue 2.x 的要，你可以使用一个特殊的元素 `<template>` 来包装们。

你可以将整个子组件的内容放在一个 `<template>` 中，并将 `v-for` 应用 `<template>` 上，如下示：

>
  <template v-for="(item, index) in menuList">
    <!-- 无子菜单 -->
    <template v-if="!item.children">
      <a-menu-item :key="item.key">
        <a-icon type="pie-chart" />
        <span>{{ item.title }}</span>
      </a-menu-item>
    </template>
    <!-- 有子菜单 -->
    <template v-else-if="item.children && item.children.length > 0">
      <a-sub-menu :key="item.key">
        <template #title>
          <a-icon type="pie-chart" />
          <span>{{ item.title }}</span>
        </template>
      </a-sub-menu>
    </template>
  </template>
</div>

这样，你就可以在子组件中正确地使用 `<a-menu-item>` 和 `<a-sub-menu>`，并且遵循 Vue 2.x 的要求。

希望这个解决方案能够帮助你解决问题！如果还有其他疑问，请随时提问。

<template> <div v-for="item in state.managelists" :key="item.ID"> <span v-if="!state.editstate">{{ item.siteName }}</span> <a-input type="text" style="width: auto" v-model:value="item.siteName" @input="tempSiteNames[item.ID] = $event.target.value" v-else /> <span v-if="!state.editstate">{{ item.remark }}</span> <a-input v-else type="text" style="width: 100%" v-model:value="item.insertedAt" @input="tempInsertedAts[item.ID] = $event.target.value" /> </div><a-button v-if="!state.editstate">编辑 </a-button> <div v-else> <a-button>保存</a-button> <a-button>取消 </a-button> </div> </template>用vue3<script setup>写下以上功能，需要有注释

<script setup>
import { reactive } from 'vue';

// 初始化数据
const state = reactive({
managelists: [
{ ID: 1, siteName: '站点1', remark: '备注1', insertedAt: '2021-01-01' },
{ ID: 2, siteName: '站点2', remark: '备注2', insertedAt: '2021-01-02' },
{ ID: 3, siteName: '站点3', remark: '备注3', insertedAt: '2021-01-03' },
],
editstate: false, // 是否处于编辑状态
tempSiteNames: {}, // 临时存储编辑后的站点名称
tempInsertedAts: {}, // 临时存储编辑后的插入时间
});

// 切换编辑状态
const toggleEditState = () => {
state.editstate = !state.editstate;
};

// 保存编辑后的数据
const saveData = () => {
for (const item of state.managelists) {
if (state.tempSiteNames[item.ID]) {
item.siteName = state.tempSiteNames[item.ID];
}
if (state.tempInsertedAts[item.ID]) {
item.insertedAt = state.tempInsertedAts[item.ID];
}
}
state.tempSiteNames = {};
state.tempInsertedAts = {};
toggleEditState();
};

// 取消编辑
const cancelEdit = () => {
state.tempSiteNames = {};
state.tempInsertedAts = {};
toggleEditState();
};

</script>

<template>
<div v-for="item in state.managelists" :key="item.ID">
<!-- 站点名称 -->
<span v-if="!state.editstate">{{ item.siteName }}</span>
<a-input
type="text"
style="width: auto"
v-model:value="item.siteName"
@input="state.tempSiteNames[item.ID] = $event.target.value"
v-else
/>
<!-- 备注 -->
<span v-if="!state.editstate">{{ item.remark }}</span>
<a-input
v-else
type="text"
style="width: 100%"
v-model:value="item.insertedAt"
@input="state.tempInsertedAts[item.ID] = $event.target.value"
/>
</div>
<!-- 编辑按钮或保存/取消按钮 -->
<a-button v-if="!state.editstate" @click="toggleEditState">编辑</a-button>
<div v-else>
<a-button @click="saveData">保存</a-button>
<a-button @click="cancelEdit">取消</a-button>
</div>
</template>

<!-- 注释:
- reactive: 用于创建响应式数据
- state: 存储组件中的数据和状态
- toggleEditState: 切换编辑状态的函数
- saveData: 保存编辑后的数据的函数
- cancelEdit: 取消编辑的函数
- v-for: 遍历数组managelists，生成多个元素
- v-if: 根据条件渲染元素
- v-else: 表示与v-if相反的条件
- v-model:value: 双向绑定元素的值
- @input: 监听元素的输入事件
- @click: 监听元素的点击事件
- key: 用于唯一标识列表中的每个元素
- a-button: ant-design-vue组件库中的按钮组件
- style: 元素的样式
-->