next() { if (this.current == 2) { this.$Message.info("已完成所有阶段，任务状态已经改变"); this.$emit("closeModal"); this.current = 0; } else { this.current += 1; } this.current == 1 ? (this.columns[0].title = "方案设计阶段工作包") : ""; this.current == 2 ? (this.columns[0].title = "技术施工设计阶段工作包") : ""; this.current == 0 ? (this.columns[0].title = "策划设计阶段工作包") : ""; },改成<script setup>写法

可以将该方法改写成如下的 `<script setup>` 写法：

<script setup>
  let current = 0;
  const columns = [{ title: "策划设计阶段工作包" }];

  const next = () => {
    if (current == 2) {
      $Message.info("已完成所有阶段，任务状态已经改变");
      $emit("closeModal");
      current = 0;
    } else {
      current += 1;
    }
    current == 1 ? (columns[0].title = "方案设计阶段工作包") : "";
    current == 2 ? (columns[0].title = "技术施工设计阶段工作包") : "";
    current == 0 ? (columns[0].title = "策划设计阶段工作包") : "";
  };
</script>

其中，使用 `let` 声明了 `current` 变量，使用 `const` 声明了 `columns` 数组，函数体内的 `this` 关键字替换成了 `$`，并且使用箭头函数来声明 `next` 函数。

相关问题

next() { if (this.current == 2) { this.$Message.info("已完成所有阶段，任务状态已经改变"); this.$emit("closeModal"); this.current = 0; } else { this.current += 1; } this.current == 1 ? (this.columns[0].title = "方案设计阶段工作包") : ""; this.current == 2 ? (this.columns[0].title = "技术施工设计阶段工作包") : ""; this.current == 0 ? (this.columns[0].title = "策划设计阶段工作包") : ""; },改成vue3写法

在 Vue 3 中，我们需要使用 Composition API 来编写代码。可以将上面的代码转换成如下的 Vue 3 写法：

<template>
  <!-- 省略模板内容 -->
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const current = ref(0);
    const columns = ref([{ title: '策划设计阶段工作包' }]);

    function next() {
      if (current.value == 2) {
        this.$message.info('已完成所有阶段，任务状态已经改变');
        this.$emit('closeModal');
        current.value = 0;
      } else {
        current.value += 1;
      }

      current.value == 1 ? (columns.value[0].title = '方案设计阶段工作包') : '';
      current.value == 2 ? (columns.value[0].title = '技术施工设计阶段工作包') : '';
      current.value == 0 ? (columns.value[0].title = '策划设计阶段工作包') : '';
    }

    return {
      current,
      columns,
      next,
    };
  },
};
</script>

在 Vue 3 中，我们需要使用 `ref()` 函数来创建响应式数据。而在 `setup()` 函数中，我们可以直接使用这些响应式数据和函数。注意，由于 `setup()` 函数中没有 `this`，所以需要将原来的 `this.current` 改为 `current.value`，将 `this.columns` 改为 `columns.value`。另外，由于 Vue 3 中使用了 `setup()` 函数，所以需要将组件的选项改为 `export default {}`，而不是原来的 `export default Vue.extend({})`。